@输入router.navigate angular4

Question

如何通过router.navigate在角度4环境中将值传递给@Input？ 内嵌正常工作：

<app-clinicdetail [clinicCode]="detailclinic"></app-clinicdetail> 

，但我要的是

this.router.navigate(['/clinicdetail']) 

与价值传递。

Answer 1

以下是如何通过使用导航将参数传递给路由加载的组件。

角4生成URL和路线的方式是这样的：

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'] 
}) 
export class HomeComponent implements OnInit { 

    constructor(private router: Router) { } 

    ngOnInit() { 
    } 

    onLoadServers(id: number){ 
    this.router.navigate(['/servers', id, 'edit'],{queryParams: {allowEdit: '1'}, fragment: 'loading'}); 
    } 

} 

由于命令导航在onLoadServers（）您将收到的路由的以下观点：

http://localhost:4200/servers/1/edit?allowEdit=1#loading

在通过这条路线零件载你可以收到的查询参数和片段（装载 - 在这种情况下）有：

constructor(private route: ActivatedRoute) { } 

ngOnInit() { 
    console.log(this.route.snapshot.queryParams);//{allowEdit:"1"} 
    console.log(this.route.snapshot.fragment);//loading 
}