angular - @Input 与 router.navigate angular4

Question

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

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

但我想要的是

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

随着值(value)的传递。

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() 中，您将收到以下路由 View :

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

在此路由的组件加载中，您可以 接收 查询参数和片段( loading - 在这种情况下):

constructor(private route: ActivatedRoute) { }

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