zoukankan      html  css  js  c++  java
  • [Angular2 Router] Use Params from Angular 2 Routes Inside of Components

    Angular 2’s ActivatedRoute allows you to get the details of the current route into your components. Params on the ActivatedRoute are provided as streams, so you can easily map the param you want off of the stream and display it in your template.

    For example we have a HerosComonent, and inside HerosComponent, we will have multi HeroComponent:

    heros.component.html:

    <ul>
      <li>
        <a [routerLink]="'1'"
           routerLinkActive="active"
           [routerLinkActiveOptions]="{exact: true}">Hero 1</a>
      </li>
    </ul>

    heros.routers.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)

    hero.component.ts:

    import { Component, OnInit } from '@angular/core';
    import {ActivatedRoute} from "@angular/router";
    
    @Component({
      selector: 'app-hero',
      templateUrl: 'hero.component.html',
      styleUrls: ['hero.component.css']
    })
    export class HeroComponent implements OnInit {
    
      id;
      constructor(private router: ActivatedRoute) {
        this.id = router.params.map((p:any) => p.id);
      }
    
      ngOnInit() {
      }
    
    }

    Github

  • 相关阅读:
    JVM如何执行方法调用
    JVM如何实现反射
    JVM是如何处理异常的
    Java类加载
    windows-Kafka安装
    Google Eventbus简单使用
    队列c#版
    python 元类

    Spring Mvc 笔记二之异常和文件上传
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5907782.html
Copyright © 2011-2022 走看看