您的位置:首页 > Web前端 > AngularJS

小白入门angular-cli的第一次旅程(学习目标 学习目标 1. 路由基础知识)补充学习

2018-08-25 17:10 776 查看
上篇文章里首先学习了路由对象的基本配置包括Routes, RouterOutlet,RouterLink
这3个路由配置对象,这次来学习一下Router的用法吧。
步一:app.component.html文件
<button (click)="tabProductDetails()">商品信息</button>
<router-outlet></router-outlet>
步二:app.component.ts文件
export class AppComponent {
constructor ( private router : Router) { } //1.
tabProductDetails () { //2.
this.router.navigate(['/product'])
}
}
这回需要解决一个第二个问题:报错信息如图

显示。
在说的是找不到路由配置

解决过程:说明:需要用通配符来解决问题

步一: 新增组件: ng g component code404

步二:在code404.component.html中写入


步三: app-routing.module.ts,先引入
import {Code404Component} from './code404/code404.component';
再配置路由

const routes: Routes = [
{path :' ** ', component : Code404Component }
]
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  angular cli