一、Angular路由配置

1.首先在创建项目时要注意创建项目路由

2.在app-routing.module.ts中引入需要配置的组件，然后声明访问路径

  1. import { HomeComponent } from './components/home/home.component';
  2. import { HeaderComponent } from './components/header/header.component';
  3. import { NewsComponent } from './components/news/news.component';
  4. import { NewDetailComponent } from './components/new-detail/new-detail.component';
  5. import { HeaderDetailComponent } from './components/header-detail/header-detail.component';
  7. const routes: Routes = [
  8.   {
  9.     path:'home',component:HomeComponent
  10.   },{
  11.     path:'header',component:HeaderComponent
  12.   },{
  13.     path:'news',component:NewsComponent
  14.   },{
  15.     path:'',component:HomeComponent
  16.   },{
  17.     path:'newsDetail/:id',component:NewDetailComponent
  18.   },{
  19.     path:'headerDetail/:id',component:HeaderDetailComponent
  20.   }
  22. ];
  25. //另外可以设置匹配不到路由的跳转页面
  26. {path:'**', redirectTo:'home'}

3.找到app.component.html根组件模板，配置router-outlet显示动态加载的路由

  1. <h1>
  2.     <a routerLink="/home">首页</a>
  3.     <a routerLink="/news">新闻</a>
  4. </h1>
  6. <router-outlet></router-outlet>

4.设置选中高亮（或者其他）样式

  1. <h1>
  2.     <a routerLink="/home" routerLinkActive="active">首页</a>
  3.     <a routerLink="/news" routerLinkActive="active">新闻</a>
  4. </h1>
  6. <router-outlet></router-outlet>
  9. //设置样式
  10. .active{
  11.     color: red;
  12. }

父子路由的配置

  1. {path:'',component:ProductComponent,
  2.     children:[
  3.         {path:'cart', component: CartComponent},
  4.         {path: "pcontent",component: PcontentComponent}
  5.     ]
  6. }

二、自定义模块

适用于大型项目时，自定义模块来组织项目
在这里我们创建三个自定义模块，每个 模块有几个组件
image.png

1.创建模块

  1. //创建模块时配置路由
  2. ng generate module modules/自定义模块名 --routing //加入这个参数就会在自定义模块中多一个配置路由的文件
  4. //自定义模块区别于内置模块的是它仅有一个ts文件和一个配置路由的文件

2.为自定义模块创建根组件

  1. ng generate component modules/自定义模块名
  2. //就会生成自定义模块跟组件，包含四个文件
  4. //在自定义模块的ts文件中暴露组件
  5. exports: [UserComponent], /*暴露组件让其他模块里面可以使用暴露的組件*/

image.png

3.在根模块中动态挂载自定义模块，即实现模块的懒加载

  • 先回顾一下在跟模块中如何挂载自定义组件，我们需到app-routing.module.ts中“引入所有组件，然后在配置数组中写入对应关系，如下图所示：
  • image.png
  • 注意：我们现在在根模块路由到自定义模块不再需要像上面那样引入了。
  • 先看app-routing.module.ts文件如何配置
  • image.png
  • 与配置组件不同，routes数组的对象的第二个属性是”loadChildren”，而组件的是”component”。为了实现跳转，现在app.component.html中写如下代码：
  • image.png
  • 因为我们上面在app-routing.module.ts文件中只是配置它会导航至自定义模块，但是在自定义模块又如何导航还没有配置，所以现在还要去自定义模块路由文件实现路由配置，教他怎么导航，在子模块配置导航至自身所拥有的组件就跟最上面的配置一样了，需要引入组件：
  • image.png
  • 实现结果：
  • image.png
  • 这已经实现了懒加载，我们接下来在自定义模块加入组件，在自定义模块同样配置路由：
  • image.png
  • image.png
  • 实现结果
  • image.png
  • 注意，这样实现的方式，其组件都是加载到app.component.html的标签中：
  • image.png
  • 但是如果是父子组件的话，就不是所有组件内容都加载到app.component.html中的router-outlet标签了，而是加载到父组件的router-outlet标签。
  • 代码如下：在自定义模块中实现父子组件
  • image.png
  • 在一个组件中引入另一个组件，实现父子组件关系
  • image.png
  • image.png
  • image.png
  • 父子组件的子组件只挂载到父组件的router-outlet标签中。

路由懒加载

在angular中路由既能加载组件又能加载模块，而我们说的懒加载实际就是说的加载模块，
1.加载组件使用的是component关键字
2.加载模块使用的是loadChildren关键字

  1. //当前版本有两种写法
  2.   { 
  3.     path: 'dynamic',
  4.     loadChildren: './modules/dynamic/dynamic.module#DynamicModule'
  5.     // loadChildren: () => import('./modules/dynamic/dynamic.module').then( m => m.DynamicModule)
  6.   }