Question

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

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

但我想要的是

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

价值传递。

Answer 1

以下是使用导航将params传递给路径加载的组件的方法。

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（）中的命令导航，您将收到以下路线视图：

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
}

@Input with router.navigate angular4

1 个答案: