碰碰战队|Angular应用内路由(In App Route)的最佳实践
Angular官网里关于路由开发的最佳实践指导：
> In Angular, the best practice is to load and configure the router in a separate, top-level module that is dedicated to routing and imported by the root AppModule.
> By convention, the module class name is AppRoutingModule and it belongs in the app-routing.module.ts in the src/app folder.
使用命令行生成路由module：
> ng generate module app-routing --flat --module=app
flat的含义: 把生成的module放到项目根目录下面 ， 而不是放到一个单独目录下 。
【碰碰战队|Angular应用内路由(In App Route)的最佳实践】--module=app：告诉CLI该module生成完毕后 ， 注册到AppModule的imports数组内 。
代码如下：
import { NgModule } from '@angular/core';import { RouterModule, Routes } from '@angular/router';import { HeroesComponent } from './heroes/heroes.component';const routes: Routes = [{ path: 'heroes', component: HeroesComponent }];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]})export class AppRoutingModule { }Routes告诉Router ， 当用户点击了url或者将路径粘贴到地址栏之后 ， 应该打开哪个视图 。
RouterModule.forRoot(routes)方法的作用：
> configure the router at the application's root level. The forRoot() method supplies the service providers and directives needed for routing, and performs the initial navigation based on the current browser URL.
使用route之前的app Component html：
使用route之后：
{{title}}```
> The
RouterOutle是router指令 ， 整个AppComponent范围内都可用 ， 因为在AppModule里导入了AppRoutingModule ， 而后者又export了RouterModule.
测试：
推荐阅读
- 大河客户端|布局战队，导师各有妙招，《2020中国好声音》收视率蝉联第一
- 周到|“好声音”蝉联省级卫视综艺节目收视第一，首迎抢位战导师布局战队各有妙招
- 通天战队|A股最励志闻泰科技！给华为小米打工到半导体巨头，半年赚17亿
- |《街舞3》火舞台battle开启 钟汉良战队团魂之力势不可挡
- |《这！就是街舞》第三季火舞台热力喷发，队长领衔齐舞大秀燃炸战队之魂
- 巅峰战队|ConcurrentHashMap的部分源码分析
- 巅峰战队|VERTIX户外手表，勇攀新高峰——COROS
- 环球网|美海军陆战队一架CH-53E紧急迫降 未造成人员伤亡
- tes战队|lpl战队成员大更新！RNG崛起！TES在明年无可撼动！
- 碰碰战队|麒麟5nm芯片推迟，消息称华为正力催台积电交付订单