在终端给应用再创建一个功能模块,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 组件的视图内容。