@输入router.navigate angular4

问题描述：

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

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

，但我要的是

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

与价值传递。

你*不*传递给'@ Input'通过路由。如果您想在路由时传递数据，它将通过路由器参数传递。 – jonrsharpe

请查阅本文档，了解如何通过组件导航发送额外的属性.https：//angular.io/api/router/NavigationExtras –

这样可以将URL中的数据暴露在更少的情况下，如果这符合您的需求，否则您将不得不使用自定义服务来存储和检索数据。 –

答

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

角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 
}

@输入router.navigate angular4

相关推荐