用户登录

🎉 8 周年订阅优惠

在终端给应用再创建一个功能模块,ng generate 一个 module 名字是 post ,加上 --routing 选项顺便创建一个对应的路由模块,然后可以再用 --module 选项设置一下包含这个模块的模块,这里设置成 app,这样会在应用的 AppModule 模块里导入这里创建的这个模块。

接着再给这个模块添加一个组件,ng generate 一个 component 名字是 post 。

回到项目,打开刚才创建的 PostModule 模块,在这个模块的 Declarations 里面,已经声明了 PostComponent 组件。注意在这个模块里,并没有导出 PostComponent。

下面打开应用的根路由模块,就是这个 AppRoutingModule 模块。在它的 routes 里面可以定义一条路由,一个对象,用 path 设置一下路由地址,用一个空白,表示应用的根。然后用 component 设置一下对应的组件,可以用一下 PostComponent 。

再打开 UserRoutingModule 这个路由功能模块,在它的 routes 里面,添加一条路由,路由的 path 是 users,路由的 component 设置成 UserComponent。

在 Angular 的路由定义里设置的组件,都会是 entryComponent。

打开 UserModule 模块,可以去掉里面的 exports 。

然后打开 AppComponent 组件的模板文件,去掉这里用的 app-user。 一组 a 标签,链接文字是 Home,在这个 a 元素上添加一个 routerLink,地址是 / 表示应用的根。

再添加一组 a 标签,文字是 Users,使用一个 routerLink ,地址是 /users 。

预览

回到浏览器,可以预览一下,现在是在应用的首页,页面上会显示 PostComponent 组件的视图内容, 再按一下 Users 这个链接 ,打开的地址是 users,页面上显示的是 UserComponent 组件的视图内容。

功能模块《 Angular:模块 》

统计

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

社会化网络

关于

微信订阅号

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