angular路由问题

angular路由问题：

参考：
官网：https://angular.cn/guide/router
个人：
https://blog.csdn.net/weixin_41952198/article/details/81560553

active的参数：https://majing.io/posts/10000019031169

创建路由文件：

ng generate module app-routing --flat --module=app

注：–flat 把这个文件放进了 src/app 中，而不是单独的目录中。–module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。

路由参数

1. 查询参数中传递数据

// ?参数：
<a [routerLink]="['/tab4']" [queryParams]="{id:3}" >tab4</a>

// 或者：去掉了中括号
<a [routerLink]="'/tab4'" [queryParams]="{id:3}" >tab4</a>

import {ActivatedRoute} from '@angular/router';
constructor(private activatedRoute:ActivatedRoute) { }

private id
ngOnInit() {
   // 快照
   this.id=this.activatedRoute.snapshot.queryParams["id"]; 
   
 	// 或者使用订阅的方式：
 	this.route.queryParams.subscribe((params)=>{
		  console.log('queryParams参数:',params);
	})
}

注：queryParams的对象里面，不要最后有多余的“，”，严格遵守JSON规范，否则报错。

错误信息：

 Error: Template parse errors:
Parser Error: Unexpected token }, expected identifier, keyword, or string at column 57 in [{
                    id:'ks-id'||'',
                    
     [ERROR ->][queryParams]="{
            id:'ks-id'||'',
      }">详情</a>

2. 路由路径（url）中传递参数

路由：

 {
    path: 'tab4/:name',
    component:Tab4Component,
    children: []
  },

HTML：

//  /参数：在数组里的第二个参数，等等。
<a [routerLink]="['/tab4','abc']" [queryParams]="{id:3}" >tab4</a>

// 或者：
<a [routerLink]="['/tab4/abc']" [queryParams]="{id:3}" >tab4</a>

js：

public name;
ngOnInit() {
	// 快照
    this.name=this.activatedRoute.snapshot.params['name'];  // abc

	// 订阅：
	this.activatedRoute.params.subscribe((params)=>{
  		console.log('params参数:',params); // {name:abc}
	})
 }

  ngOnInit() {
  	// 快照方式：
    // this.id=this.activatedRoute.snapshot.queryParams["id"]
    // this.name=this.activatedRoute.snapshot.params['name']  
    // 或者：
    // this.activatedRoute.params['value'].name  等同于snapshot的使用。
	
	// 订阅方式
    this.activatedRoute.queryParams.subscribe((params:Params)=>{
      this.id=params['id']; // 
    })
    this.activatedRoute.params.subscribe((params:Params)=>{
      this.name=params['name']; // 
    })

  }

注：
一个是queryParams，另一个是params。

3. 路由配置中设置静态数据

 {
    path: 'tab4/:name',
    component:Tab4Component,
    children: [],
    data:[{ksData:'路由配置静态数据'}]
  },

private data
  ngOnInit() {
    // this.id=this.activatedRoute.snapshot.queryParams["id"]
    // this.name=this.activatedRoute.snapshot.params['name']
    
    this.activatedRoute.queryParams.subscribe((params:Params)=>{
      this.id=params['id']
    })
    this.activatedRoute.params.subscribe((params:Params)=>{
      this.name=params['name']
    })
    
    //下面为新加入的
    this.data=this.activatedRoute.snapshot.data[0]["ksData"]

  }

跳转路由

  private router: Router,

  // url，参数
  this.router.navigate(
      ['/pages/xxxxxx/msg-detail'],
      { queryParams: {channelId: 'aaaa', secondMenuName: "消息通道",flag:true}}
    );

isActive的使用：

参考：https://www.cnblogs.com/nw0220/p/9111176.html
路由的全部用法：https://blog.csdn.net/It_rod/article/details/79199787

js中的使用：

//在需要登录的页面，如果用户未登录，跳转到登录页面
if (!this.router.isActive('login', false) && !UserInfo.loginInfo) {
  this.goLogin();
  return;
}

第二个参数：exact，是否严格匹配。

获取url：

// 获取路由：
let path = this.location.path();
console.log("baPageTop.path:",path);
console.log("baPageTop.path2:",this.router.url);