zoukankan      html  css  js  c++  java
  • [Angular2 Router] Optional Route Query Parameters

    In this tutorial we are going to learn how to use the Angular 2 router to pass optional query parameters from one route into another route. There are couple of ways of doing this from the source route perspective: we use the queryParams property in the navigate API call, or we can use the queryParams directive.

    On the receiving side, and especially in the case of detail child routes where we want to navigate from one detail into the other, we are going to see how to use the queryParams observable to receive the navigation query parameters.

    First way, using in html:

        <a [routerLink]="hero.id"
           routerLinkActive="active"
           [queryParams]="{description: 'Starwar Hero '}"
           [routerLinkActiveOptions]="{exact: true}">{{hero.name}}</a>

    Second way, using in JS:

      getHeroByIndex(i){
       // this.router.navigateByUrl(`/heros/${i}`);
       // this.router.navigate(['heros', i]);
        this.router.navigate([i], {
          relativeTo: this.route,
          queryParams: {
            description: 'Star war Hero'
          }
        })
      }

    Read the query param:

    export class HeroComponent implements OnInit {
    
      hero: Observable<any>;
      description: string;
    
      constructor(private router: ActivatedRoute,
                  private starwarService: StarWarsService) {
    
      }
    
      ngOnInit() {
        /* this.hero = this.router.params
         .map((p:any) => p.id)
         .switchMap( id => this.starwarService.getPersonDetail(id));
         */
    
        // since herocomponent get init everytime, it would be better to use snapshot for proferemence
        const heroId = this.router.snapshot.params['id'];
        this.hero = this.starwarService.getPersonDetail(heroId);
    
        this.router.queryParams.subscribe(
          param => this.description = param['description']
        )
      }
    
    }

    In url, it looks like:

    http://localhost:4200/heros/4?description=Starwar%20Hero%20

    Github

  • 相关阅读:
    (转)大数据量高并发的数据库优化与sql优化
    SQL Server查询优化方法参考(转)
    CString和LPCSTR区别(转)
    delphi读写剪贴板的一些参考
    Delphi和VC混合编程总结
    Delphi 一些函数解释
    伪共享与volatile
    happens-before原则
    递归与回溯-排立组合
    二叉树
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5917824.html
Copyright © 2011-2022 走看看