angular——路由

示例中使用两种格式的url
1.动态路由：http://127.0.0.1:4200/news/1
2.get请求传参：http://127.0.0.1:4200/productcontent?id=1

一.动态路由

1.在app-routing.module.ts 文件中配置路由

// 引入组件
import { NewsComponent } from './components/news/news.component';
import { HomeComponent } from './components/home/home.component';
import { ProductComponent } from './components/product/product.component';
import { NewscontentComponent } from './components/newscontent/newscontent.component';
import { ProductcontentComponent } from './components/productcontent/productcontent.component';

// 添加路由配置
const routes: Routes = [
  // 设置路由绑定组件，开头不要加/
  {path:'home',component:HomeComponent},
  {path:'news',component:NewsComponent},
  // 配置动态路由，示例：http://127.0.0.1:4200/news/1
  {path:'news/:id',component:NewscontentComponent},
  {path:'product',component:ProductComponent},
  {path:'productcontent',component:ProductcontentComponent},
  // 匹配不到路由时加载的组件或者跳转的路由
  {path:'**', redirectTo: 'home'},
];

2.在app.component.html 根组件模板中配置router-outlet 显示动态加载的路由标签

<h1>父组件</h1>

<header>
  <!-- routerLink：a标签绑定对应的路由，跳转组件  
    routerLinkActive：跳转至该路由时给标签添加active类 -->
  <a [routerLink]="[ '/home' ]" routerLinkActive="active">首页</a>
  <a [routerLink]="[ '/news' ]" routerLinkActive="active">新闻</a>
  <a routerLink="/product" routerLinkActive="active">产品</a>
</header>

<!-- 路由刷新后动态加载对应的组件 -->
<router-outlet></router-outlet>

3.组件html片段中设置a标签跳转传值

    <li *ngFor="let item of news_list">
        <!-- 动态路由的跳转 -->
        <a [routerLink]="[ '/news', item.id ]">{{item.id}}——{{item.title}}</a>
        <!-- <a routerLink="/news/{{item.id}}">{{item.id}}——{{item.title}}</a> -->
    </li>

4.子组件ts文件中获取动态路由的值

// 引入模块，获取动态路由的参数
import { ActivatedRoute} from '@angular/router';

  constructor(public router:ActivatedRoute) { }

  ngOnInit() {
    // 获取动态路由的参数
    this.router.params.subscribe(data=>{
      console.log(data);
      console.log(data.id);
    })
  }

5.动态路由的js跳转

// 引入js手动跳转时需要的模块，第二个用于get传参
import { Router,NavigationExtras } from '@angular/router'

  goNews(){
    // 动态路由的跳转
    this.router.navigate(["/news"]);
    // this.router.navigate(["/news", 2]);
  }

二.get请求传参

1.组件html片段中设置a标签跳转传值

    <li *ngFor="let item of product_list;let key=index;">
        <!-- 通过该方法拼接查询参数，传入的参数是一个对象 -->
        <a [routerLink]="[ '/productcontent']" [queryParams]="{id:item.id}">{{key+1}}——{{item.title}}</a>
        <!-- <a href="/productcontent?id=5">{{key+1}}——{{item.title}}</a> -->
    </li>

2.子组件ts文件中获取查询参数

// 导入模块，接收get请求的参数
import { ActivatedRoute } from '@angular/router';

  constructor(public router:ActivatedRoute) { }

  ngOnInit() {
    // 接收get请求的参数
    this.router.queryParams.subscribe(data=>{
      console.log(data);
      console.log(data.id);
    })
  }

3.js跳转

// 引入js手动跳转时需要的模块，第二个用于get传参
import { Router,NavigationExtras } from '@angular/router'

  constructor(private router:Router) { }
  
  goProduct(){
    let navigationExtras: NavigationExtras = {
      queryParams: {id:2}
    }
    this.router.navigate(['/productcontent'], navigationExtras)
  }

三.父子路由

1.配置子路由 app-routing.module.ts

import { NewsaddComponent } from './components/newsadd/newsadd.component';
import { NewslistComponent } from './components/newslist/newslist.component';

const routes: Routes = [
  // 设置路由绑定组件，开头不要加/
  {path:'home',component:HomeComponent},
  {
	  path:'news',component:NewsComponent,
	  // news下的子路由
	  children: [
		  {path:'newslist',component:NewslistComponent},
		  {path:'newsadd',component:NewsaddComponent}，
		  {path:'**',redirectTo:'newslist'}
	  ]
  },
  {path:'**', redirectTo: 'home'},
];

2.父组件中添加router-outlet标签

<router-outlet></router-outlet>

参考：https://www.bilibili.com/video/av59049211?from=search&seid=485997827014437418