@Input with router.navigate angular4

Question

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

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

但我想要的是

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

具有值传递。

Answer 1

这是一种使用导航到路由加载的组件来传递参数的方法。

Angular 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((中的命令 naving，您将收到以下路由视图：

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

在通过此路由加载的组件中，您可以使用以下命令接收查询参数和片段(在本例中为 load(：

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