路由的配置、跳转和嵌套

一、配置路由

方法一：（简单配置）
0、准备

• 创建一个带路由的项目
• 创建组件
• 在根模块中引入需要跳转的组件

1、添加路由
app-routing.module.ts中

  RouterModule.forRoot([
  { path:'',component:ProductListComponent },
  { path:'products/:productId',component:ProductDetailsComponent },
])

2、配置组件模板，显示动态加载的路由
product-list.component.html

遍历列表的过程中把 products 数组中的每个索引赋值给 productId 变量

<a [title]="product.name + 'details'"  [routerLink]="['/products', productID]">
            {{product.name}}
</a>

现在的效果可以实现点击超链接，跳转X页面。

方法二：（升级版）

但是想实现的效果是，点击A超链接，显示X页面的A信息，点击B超链接，显示X页面的B信息，也就是名称与属性对应起来。
实现点击商品，显示每个商品的详情。
1、导入ActivatedRoute
product-details.component.ts
1）改用外部文件中的商品数据。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { products } from '../products';

export class ProductDetailsComponent implements OnInit {
  product;

  constructor(private route: ActivatedRoute) { }

}

2）订阅参数，获取数据

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.product = products[+params.get('productId')];
  });
}

2、修改模板
product-details.component.html

<div *ngIf="product">
    <h3>{{product.name}}</h3>
    <h4>{{product.price | currency}}</h4>
    <p>{{product.description}}</p>
</div>

二、跳转路由

1、get传值


为得到上图效果，步骤：
1）写dom

<!-- 该超链接会跳转newscontent页面 -->
<a [routerLink]="[ '/newscontent']">跳转到新闻详情</a>  

<ul >
    <li *ngFor="let item of newslist;let key = index">
        <!-- 该超链接会跳转newscontent/aid页面 -->
        <a [routerLink]="[ '/newscontent']" [queryParams]="{aid:key}">{{key}} --- {{item}}</a>
    </li>
</ul>

2）在将要跳转到的页面的模块中导入ActivatedRoute

import { ActivatedRoute } from '@angular/router'

constructor(public route:ActivatedRoute) { }

  ngOnInit(): void {
  
    this.route.queryParams.subscribe((data) =>{
      console.log(data);
    })
  }

2、动态路由

1）在app-routing.module.ts中

 {path:'newscontent/:aid',component:NewscontentComponent}

2）在跳转前的页面写dom

<ul >
    <li *ngFor="let item of newslist;let key = index">
        <!-- 该超链接会跳转newscontent/aid页面   动态路由方法-->
        <a [routerLink]="[ '/newscontent/', key ]">{{key}} --- {{item}}</a>
    </li>
</ul>

3）打印输出与get方法的区别在于：

this.route.params.subscribe((data) =>{
      console.log(data);
    })

3-1 js路由跳转

<button (click)="jsGet()">js普通跳转</button>

<button (click)="jsGohome()">js动态跳转到首页</button>

在跳转前的页面的模块中，导入Router 并声明。

import { Router } from '@angular/router';

constructor(public router:Router) { }

  jsGet(){
    //动态路由
    this.router.navigate(['/newscontent/','1234']);
  }

  jsGohome(){
    this.router.navigate(['./home']);
  }

3-2 js get方法跳转

<button (click)="jsGonews()">js-get方法跳转到新闻</button>

  jsGonews(){
    let queryParams = {
      queryParams:{'aid':123}
    }
    this.router.navigate(['./news'],queryParams);
  }

三、嵌套（父子）路由

1、创建子路由组件

2、app-routing.module.ts中

3、右侧引入，routerLinkActive定义选中状态