Angular Router 路由常用例子速查

Angular Router 路由常用例子速查

angular 版本12.x

触发激活路由方式：

1. 链接激活

   链接标签添加属性routerLink='router'

   标签可以添加routerLinkActive属性:路由链接激活时，可指定在当前标签添加class

2. JS执行导航方式

   this.router.navigate(['/url']);
   

路由传参数-请求参数模式

请求参数模式是明文参数，都会在url链接上展示。

1. 请求参数 queryParams

   基本格式：Url?data=1

   1. 链接属性上激活设置

      <a class="card" [routerLink]="/news" [queryParams]="dataObj">Link</a>
      

   2. JS激活设置

      // 查询参数
      let query: NavigationExtras = {
        queryParams: {
          category: 'social',
          date: '2020-05-04'
        }
      };
      this.router.navigate(['/news' ], query);
      

2. 动态链接-链接占位符

   基本格式：/url/news/1111

   需要先在路由中，设置对应的占位符参数:

   const routes: Routes = [
     { path: 'news/:newsId', component: NewsDetailComponent },
   ];
   

   1. 链接属性上激活设置

      可传入一个数组，第二位数据，就是对应的参数值

      <a [routerLink]="['/news', item.newsId]" routerLinkActive="active" >
            title
          </a>
      

   2. js触发

      与属性模式，同理

      this.router.navigate(['/news', 11111]);
      

接受请求参数

导入ActivatedRoute,在init中,订阅queryParamMap即可:

ngOnInit(): void {

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