实例在 angulardemo08，angulardemo08 :
    Angular路由作用：为了解决各个组件之间挂载时需要手动去进行挂载取消操作。路由可以根据不同的URL地址，动态的让根组件挂载其他组件，来实现一个单页面应用
    image.png
    比如点击首页按钮时，根组件会动态的挂载首页组件，其他组件断开，从而在当前页面（不刷新）显示首页组件的内容。

    / *配置路由

    1. 创建项目时提示是否创建routing路由，选择yes
    2. 创建需要的组件，如 ng g component components/home(或者news，或者product)
    3. 在app-module.ts里引入import { HomeComponent } from’./components/home/home.component’;

    ，并且声明declarations: [HomeComponent,], 创建是应该默认已经配置好了的

    1. 在app-routing.module.ts中引入import { HomeComponent } from’./components/home/home.component’;并配置:const routes: Routes=[ {path: ‘home’, component: HomeComponent},{path:’‘,redirectTo:’home’}, ]；//表示匹配任意路由，上面都找不到时默认跳转到home组件

    */

    / *路由跳转

    1. 使用时在根页面app.component.html里写标签

    2. 在根页面app.component.html里的标签写上routerLink=”/要跳转的页面” 如下：

      1. <h1>
      2. <a routerLink="/home">首页</a>
      3. &nbsp;&nbsp;&nbsp;&nbsp;
      4. <a routerLink="/news">新闻</a>
      5. </h1>

      /
      /       按钮选中状态

    3. 在根页面app.component.html标签中添加routerLinkActive=”自定义名称” 表示选中是触发routerLinkActive

    4. 在css页面app.component.css里对”自定义名称”进行样式设计，如下： ```html 首页

    .active{color: red;}

    1. */<br />/*    **get页面跳转和接收**  场景举例：点击新闻时动态跳转到新闻详情页面<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/26976333/1648019652471-42e093c4-1f0c-4b17-8b6c-9ff009d1d4ae.png#clientId=u8d5cc56c-1425-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=306&id=u33feb0a7&margin=%5Bobject%20Object%5D&name=image.png&originHeight=382&originWidth=603&originalType=binary&ratio=1&rotation=0&showTitle=false&size=25631&status=done&style=none&taskId=u3b939b16-0aa6-43aa-a462-c685ef95c83&title=&width=482.4)
    3. 1. 创建新闻详情组件，如：ng g component components/newscontent
    4. 1. 在app-routing.module.ts中引入组件并配置(上面有，便省略)
    5. 1. 在需要跳转的页面进行标签绑定，如下： 
    6. ```typescript
    7. public list:any[]=[];
    8. ngOnInit(): void {
    9.   for(var i=0;i<10;i++){
    10.     this.list.push('这是第 '+i+' 条数据');
    11.   }
    12. }
    1. <ul>
    2.     <li *ngFor="let item of list;let key=index">
    3.         <a [routerLink]="['/newscontent']" [queryParams]="{aid:key}" >{{key}}--{{item}}</a>
    4.     </li>
    5. </ul>

    注！queryParams中的aid:key表示执行时URL显示传的key值，如图：image.png

    1. 在newscontent.component.ts获取(接收) news.component.html传过来的key：
      1. 在newscontent.component.ts引入ActivatedRoute: import { ActivatedRoute } from’@angular/router’;
      2. 构造器声明ActivatedRoute：constructor(public route:ActivatedRoute) {}
      3. this.route.queryParams.subscribe((data)=>{console.log(data);}); 就可以接收并打印key值，因为queryParams是Rxjs的，所以只能使用Rxjs内置方法subscribe接收数据

    /
    /     动态路由传值 场景举例：点击新闻时动态跳转到新闻详情页面

    1. 配置路由—>在app-routing.module.ts配置的path里面加一个aid：如 {path:’newscontent/:aid’,component:NewscontentComponent}的

    2. 在html页面进行动态跳转，直接在routerLink里面写需要 传的位置，传的值 就行，如下：

      1. <h2>动态路由传值跳转</h2>
      2. <ul>
      3. <li *ngFor="let item of list;let key=index">
      4.  <a [routerLink]="['/newscontent',key]" >{{key}}--{{item}}</a>
      5. </li>
      6. </ul>

    3. 注！ 标签中的key表示执行时URL显示传的值，如图：image.png

    4. 在newscontent.component.ts获取(接收) news.component.html传过来的key：
      1. 和get获取差不多，只是调用的方法不一样。
      2. 在newscontent.component.ts引入ActivatedRoute: import { ActivatedRoute } from’@angular/router’;
      3. 构造器声明ActivatedRoute：constructor(public route:ActivatedRoute) {}
      4. this.route.params.subscribe((data)=>{console.log(data);}); 就可以接收并打印key值，因为queryParams是Rxjs的，所以只能使用Rxjs内置方法subscribe接收数据

    /
    /     在业务逻辑里实现动态跳转（动态路由的js跳转） 场景举例：判断登录是否成功。在js中直接进行跳转
    product和productcontent里演示

    1. 路由中引入： import { ProductcontentComponent } from’./components/productcontent/productcontent.component’;
    2. 配置路由：{path:’productcontent/:pid’,component:ProductcontentComponent},

    3. html设置按钮，并设置事件监听：

      1. <button (click)="goNewsContent()">
      2.  动态路由传值JS跳转
      3. </button>

    4. ts中引入Router：import { Router } from’@angular/router’;

    5. 构造器中声明router：constructor(publicrouter:Router) { }

    6. 在监听方法中设置需要跳转的界面和数据，普通路由跳转和动态路由跳转都适用。如下：

      1. goNewsContent(){
      2. //路由跳转
      3. this.router.navigate(['/newscontent/','跳转成功']);//参数在括号里
      4. }

      /
      /       get传值的js跳转 product和productcontent里演示

    7. 路由配置和引入同上，html设置按钮，并设置事件监听：

      1. <button (click)="goNews()">
      2.  get传值JS跳转
      3. </button>

    8. ts中引入Router和NavigationExtras：import { Router,NavigationExtras } from’@angular/router’;

    9. 构造器中声明router：constructor(publicrouter:Router) { }
    10. 在监听方法中设置需要跳转的界面和数据，普通路由跳转和动态路由跳转都适用。
      1. 先创建NavigationExtras类型需要传的值的对象
      2. 然后再进行跳转，参数中写明对象，如下：
        1. goNews(){
        2. //跳转并进行get传值
        3. let queryParams:NavigationExtras={
        4. queryParams:{'aid':123}
        5. }
        6. this.router.navigate(['/news'],queryParams);//参数在括号外
        7. }
        */

    / *父子路由 场景举例：点击首页时左边显示商品列表信息，点击左边商品列右边显示商品详情信息，如下：
    image.png

    1. 按照父子关系创建组件，在app-routing.module.ts里引入所有组件，并配置路径 ```typescript import { NgModule } from ‘@angular/core’; import { RouterModule, Routes } from ‘@angular/router’; import { HomeComponent } from ‘./components/home/home.component’; import { WelcomeComponent } from ‘./components/home/welcome/welcome.component’; import { SettingComponent } from ‘./components/home/setting/setting.component’; import { ProductComponent } from ‘./components/product/product.component’; import { PcateComponent } from ‘./components/product/pcate/pcate.component’; import { PlistComponent } from ‘./components/product/plist/plist.component’;

    const routes: Routes = [ {path:’home’,component:HomeComponent, children:[ {path:’welcome’,component:WelcomeComponent}, {path:’setting’,component:SettingComponent}, {path:’‘,redirectTo:’welcome’}//默认跳转到welcome ] }, {path:’product’,component:ProductComponent, children:[ {path:’pcate’,component:PcateComponent}, {path:’plist’,component:PlistComponent}, {path:’‘,redirectTo:’pcate’}//默认跳转到Pcate ]

    }, {path:’**’,redirectTo:’home’}////默认跳转到home ];

    @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

    2. 2. app.module.ts引入并配置所有组件，这一步一般创建时就会默认引入
    3. ```typescript
    4. import { NgModule } from '@angular/core';
    5. import { BrowserModule } from '@angular/platform-browser';
    7. import { AppRoutingModule } from './app-routing.module';
    8. import { AppComponent } from './app.component';
    9. import { HomeComponent } from './components/home/home.component';
    10. import { ProductComponent } from './components/product/product.component';
    11. import { WelcomeComponent } from './components/home/welcome/welcome.component';
    12. import { SettingComponent } from './components/home/setting/setting.component';
    13. import { PcateComponent } from './components/product/pcate/pcate.component';
    14. import { PlistComponent } from './components/product/plist/plist.component';
    16. @NgModule({
    17.   declarations: [
    18.     AppComponent,
    19.     HomeComponent,
    20.     ProductComponent,
    21.     WelcomeComponent,
    22.     SettingComponent,
    23.     PcateComponent,
    24.     PlistComponent
    25.   ],
    26.   imports: [
    27.     BrowserModule,
    28.     AppRoutingModule
    29.   ],
    30.   providers: [],
    31.   bootstrap: [AppComponent]
    32. })
    33. export class AppModule { }

    1. 全局css设置，形成图中的效果 ```css .content{ width: 100%; height: 500px; display: flex; .left{ width: 200px; border-right:5px solid #eee; height: 500px;

      } .right{ flex:1px;

      }

    }

    2. 4. 根组件引入router-outlet，使用routerLink跳转到指定组件页面（home页面或者product页面）
    3. ```html
    4. <header class="header">
    5.   <a [routerLink]="['/home']">首页</a>
    6.   <a [routerLink]="['/product']">商品</a>
    7. </header>
    8. <router-outlet></router-outlet>

    1. 在home组件引入router-outlet，使用routerLink跳转到指定组件页面（welcome页面或者setting页面），product组件同理

      1. <div class="content">
      2. <div class="left">
      3.  <br><br><br>
      4.  <a [routerLink]="[ '/home/welcome' ]">欢迎首页</a>
      5.  <br><br><br>
      6.  <a [routerLink]="[ '/home/setting' ]">系统设置</a>
      7. </div>
      9. <div class="right">
      10.  <router-outlet></router-outlet>
      11. </div>
      12. </div>

      */