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

假装没事ソ 提交于 2020-10-07 06:54:35

上篇文章里首先学习了路由对象的基本配置包括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'])

                        }

                        }

这回需要解决一个第二个问题:报错信息如图QQ截图20180825164809.png显示。

            在说的是找不到路由配置

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

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

                           步二:在code404.component.html中写入QQ截图20180825165955.png

                            步三: app-routing.module.ts,先引入

                                     import {Code404Component} from './code404/code404.component';

                                      再配置路由

                                     const routes: Routes = [

                                    {path :' ** ', component : Code404Component }

                                    ]



                


标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!