用户登录

中秋活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

在地址栏里输入了对应的地址,或者点击了某个链接,可以打开应用对应的页面,这就是路由的主要功能。在用 ng new 命令创建项目的时候,我选择了使用路由功能。

回到项目,先打开 app.module ,你会发现在这个模块的 imports 里面导入了一个 AppRoutingModule 模块,这个模块是在 app-routing.module.ts 文件里定义的。 打开这个文件。

在这个模块的 imports 里面,用了一个 RouterModule,这个模块是在 @angular/router 里的东西。这里用了一下 forRoot 方法配置了一下 RouterMoudle 模块。 给这个 forRoot 方法提供了一个 routes,这个 routes 的类型是 Routes,它也来自 @angular/router 。

在这个 routes 里面,可以定义一些路由。每个路由的定义可以是一个对象,里面先用 path 属性设置一下路由的地址,比如 posts,然后再用 component 属性设置一下对应的组件,也就是访问 posts 这个地址的时候,要在页面上显示哪个组件,这里用一下 PostComponent 这个组件,注意在文件的顶部要导入这个组件。

在 AppModule 模块里导入了 AppRoutingModule 模块,因为在这个 AppRoutingModule 模块里,exports 里面,导出了 RouterMoudle,所以,在 AppModule 模块里,也就可以使用在 AppRoutingModule 模块里导出的这个 RouterModule,这样应用也就可以知道我们在这个模块里定义的路由了。

视图

打开 AppComponent 组件的模板文件,去掉在这里添加 app-post 元素,换成一个 router-outlet,意思就是在这里输出路由对应的组件的内容。

预览

回到浏览器可以预览一下,现在应用的首页上除了标题以后,不会显示其它的东西。在地址里输入一个 /posts,这个是我们定义的一条路由的地址,打开以后,在 AppComponent 的模板里的 router-outlet 元素的地方,就会显示这个路由对应的组件,这里就是 PostComponent 这个组件。

路由(Routes)《 Angular:起步 2 》

统计

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

社会化网络

关于

微信订阅号

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