zoukankan      html  css  js  c++  java
  • [Angular2 Router] Programmatic Router Navigation via the Router API

    In this tutorial we are going to learn how to navigate programmatically (or imperatively) by using the Router API. We are going to learn how to use the function navigateByUrl to navigate using a manually constructed string, but we are also going to learn how to trigger route navigation by using the navigate API method, which takes an array or arguments and a parameters object.

    We are going to learn how to do both absolute and relative route navigation using the navigate API, and we are going to introduce the notion of activated route.

    In our HerosComponent, we add input box, when you enter the number, it will goes to fetch the hero:

    heros.routes.ts:

    import {HerosComponent} from "./heros.component";
    import {RouterModule} from "@angular/router";
    import {HeroComponent} from "./hero/hero.component";
    const routes = [
      {path: '', component: HerosComponent},
      {path: ':id', component: HeroComponent},
    ];
    export default RouterModule.forChild(routes)

    heros.component.html:

    Search Index: <input type="text" placeholder="Search" (keyup.enter)="getHeroByIndex(inpRef.value)" #inpRef>
    <ul>
      <li *ngFor="let hero of heros | async">
        <a [routerLink]="hero.id"
           routerLinkActive="active"
           [routerLinkActiveOptions]="{exact: true}">{{hero.name}}</a>
      </li>
    
      <!-- we can also do [routerLink]="['/heros', hero.id]", this will point to "heros/1";
           if you do:  [routerLink]="['heros', hero.id]",  this will point to "heros/heros/1"
           Since we are already in heros module we just need to do [routerLink]="hero.id", point to "heros/1"
       -->
    </ul>

    heros.component.ts:

    import { Component, OnInit } from '@angular/core';
    import {StarWarsService} from "./heros.service";
    import {Observable} from "rxjs";
    import {Router, ActivatedRoute} from "@angular/router";
    
    @Component({
      selector: 'app-heros',
      templateUrl: './heros.component.html',
      styleUrls: ['./heros.component.css']
    })
    export class HerosComponent implements OnInit {
    
      heros: Observable<any>;
      constructor(private starwasService: StarWarsService, private router: Router, private route: ActivatedRoute) { }
    
      ngOnInit() {
        this.heros = this.starwasService.getPeople();
      }
    
      getHeroByIndex(i){
       // this.router.navigateByUrl(`/heros/${i}`);
       // this.router.navigate(['heros', i]);
        this.router.navigate([i], {relativeTo: this.route})
      }
    
    }

    So when you type 'enter', will call getHeroByIndex function, there are three ways to nav to a router programmtically.

    1. navigateByUrl: it accepts an router url.

    2. navigate: first param is an array, absolute path: ['contacts', id] --> contacts/1

    3. Recommend: relative path:

      'this.route':  point to the current router.  

      [i]: the relative path to the current router.

    Github

  • 相关阅读:
    Windows 8 Developer Preview 已经开始提供下载!!!
    5 款傻瓜式手机 APP 开发工具
    25 超棒的 HTML5 Canvas 游戏
    12 个免费在线的 Web 网站性能测试工具
    13 个强大的基于 HTML5 的 Web 应用
    《美国毒枭》的“大悔”与“大爱”
    WEB资源大全
    5 款基于 Web 浏览器的建模工具
    iPhone开发网站
    ios开发心得之一
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5911321.html
Copyright © 2011-2022 走看看