用户登录

在终端,先在项目的 demo 模块里添加两个组件,ng generate ,生成一个 component ,放在 modules/demo 里面。再生成一个组件,放在 modules/demo/child-routes 里面。

回到项目,打开 Demo 模块的路由模块,DemoRoutingModule,在这个路由模块里定义两条路由,放在这个 routes 里面,路由的 path 是 demo ,对应的 component 设置成 DemoComponent 。

预览

回到浏览器,在地址栏里输入 demo 这个地址,现在显示的就是 DemoComponent 组件的视图内容。

子路由

再回到项目,在这条 demo 路由里面,可以添加一些子路由,在这条路由的定义里面,用一个 children ,它是一个数组,里面是一些路由的定义。添加一个子路由, path 可以设置成 child-routes,因为这条路由是 demo 的一个子路由,所以它的地址应该是 demo/child-routes。

这条路由对应的 component 是 ChildRoutesComponent。

预览

再到浏览器上试一下,在地址栏里输入 demo/child-routes,这里显示的仍然是 Demo 组件的视图,并没有显示 ChildRoutesComponent 组件的视图内容。

这是因为子路由的组件显示的地方是它的父路由组件视图里的 RouterOutlet。

RouterOutlet

回到项目,打开 Demo 组件的视图,在这个视图里要添加一个 router-outlet。 在这里的 router-outlet 这个地方,会显示 Demo 的子路由的组件。

预览

可以再回到浏览器预览一下,现在访问 demo/child-routes 这个地址的时候,页面上就会显示 child-routes 这条路由对应的 ChildRoutesComponent 组件的视图内容了。

显示这个组件的地方是在 Demo 组件视图里添加的 router-outlet 那里。

Header

再打开 Header 组件的视图文件,在这个导航里可以再添加一个链接,一组 a 标签,文字是 Demo,在这个 a 标签上用一个 routerLink,地址是 demo,再添加一个 routerLinkActive,激活状态下要添加的 css 类是 active。

现在,应用的 Header 上面,会有一个 Demo 链接,点击这个链接打开的就是 Demo 组件视图。

子路由(Child Routes)《 Angular:路由 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点