小白入门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 }
]
这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的第一次旅程(学习目标 1. 路由基础知识)
- 小白入门angular-cli的第一次旅程(学习目标 1.路由的基础知识 在路由时传递数据)
- 小白入门angular-cli的第一次旅程(学习目标 1.路由的基础知识 参数订阅写法)
- 小白入门angular-cli的第一次旅程(学习目标 学习目标 1. 路由基础知识 重定向路由)
- Angular 4 学习笔记 从入门到实战 打造在线竞拍网站 基础知识 快速入门 个人感悟
- jQuery学习笔记 - 基础知识扫盲入门篇
- C++/CLI学习入门(一):基础(转)
- Angular 基础知识规整之路由
- Angular 4.x 路由快速入门学习
- Redis学习笔记之入门基础知识——五种数据类型
- 神级程序员大佬分享给python小白入门教程及学习路线,涨知识啦!
- 【零基础入门学习Python笔记001】我和Poyhon的第一次亲密接触:课后测试集答案
- MySql入门教程mysql基础知识学习实例讲解
- 【零基础入门学习Python笔记004】改进第一次设计的游戏
- 新手入门 路由基础知识专题
- salesforce 零基础开发入门学习(十)IDE便捷小知识
- ThinkPHP的入门学习-目录结构及基础知识
- 基础知识05 - 零基础入门学习汇编语言05
- 服务器架构前的基础知识补充-持续学习
- TensorFlow入门深度学习--01.基础知识