Angular has upgraded to the stable version Angular5, which is smaller, faster, and more stable! Routing is a core part of Angular and even single-page applications. The biggest disadvantage of angularJS routing is that it can’t be nested. Angular fixes this problem! Routing in Angular isn’t just a page jump, there’s a hero list jump hero detail! In many lists, it is not possible to make a detail page for every hero, so routing parameters come into play! Identify the details of that hero by routing the incoming parameters! Now for the routing of the value of detail, the first way is the official website navigation to the details of the single value ID incoming, the other is multi data incoming! 1. Single value incoming

['/hero', hero.id]Copy the code
 <ul class="items">
    <li *ngFor="let hero of heroes$ | async"
      [class.selected]="hero.id === selectedId">
      <a [routerLink]="['/hero', hero.id]">
        <span class="badge">{{ hero.id }}</span>{{ hero.name }}
      </a>
    </li>
  </ul>Copy the code

Above is the official website example below we use my own example to introduce: first is the list page, and jump way

  <p *ngFor="let item of items" [routerLink]="['/listDetail',item.id]">{{item.name}}</p>Copy the code

Then configure routing :(single value incoming mode needs to be configured in detail component routing)

{
    path:'listDetail/:id',
    component:ListDetailComponent
  },Copy the code

Once passed in, the parameters are fetched in the ngOnInit life cycle of the detail component

ngOnInit() { this.route.params .subscribe((params: Params) => { this.id = params['id']; console.log(this.id); The console. The log (' by value); console.log(params) }) }Copy the code

2. What should we do when we need to transfer multiple data in complex business scenarios? This is where we use queryParams

  <p *ngFor="let data of datas" [routerLink]="['/listDetails']" [queryParams]="{id:data.id,state:data.state}">{{data.name}}</p>
Copy the code

I’m just taking the data up here, and again you can organize the data, put one parameter in there, simplify the HTML structure, but now I have a question, how do I configure the routing parameters with all these values coming in? /:id/:id??? My parameter is more or less not fixed what to do? In fact, this way does not need to configure the route! All you need to do is pass in and fetch data!

ngOnInit() { this.route.queryParams .subscribe((params: Params) => { this.id = params['id']; this.state = params['state']; console.log(params) console.log(this.id); console.log(this.state); })}Copy the code

Those are the two ways Angular routes value! Hope to help everyone! Can help everybody, everybody helps me to point a star point a concern! Just entered this blog is not very long! Gnome male – “.