Angular @使用路由器输入。导航角度4
如何通过router.navigate在angular 4环境中向@Input传递值? 在线工作很好:Angular @使用路由器输入。导航角度4,angular,url-routing,Angular,Url Routing,如何通过router.navigate在angular 4环境中向@Input传递值? 在线工作很好: <app-clinicdetail [clinicCode]="detailclinic"></app-clinicdetail> 通过值传递。这里有一种方法,您可以使用导航将参数传递到通过路由加载的组件 Angular 4创建URL和路由的方式如下: import { Component, OnInit } from '@angular/core'; import
<app-clinicdetail [clinicCode]="detailclinic"></app-clinicdetail>
通过值传递。这里有一种方法,您可以使用导航将参数传递到通过路由加载的组件 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()中的“导航”(navigate)命令,您将收到以下路线视图:
在通过该路径加载组件的过程中,您可以通过以下方式接收查询参数和片段(加载-在本例中):
您不能通过路由传递到
@Input
。如果您希望在路由时传递数据,它将通过路由器参数传递。请查看此文档,了解如何通过组件导航发送额外属性。这将在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'});
}
}
constructor(private route: ActivatedRoute) { }
ngOnInit() {
console.log(this.route.snapshot.queryParams);//{allowEdit:"1"}
console.log(this.route.snapshot.fragment);//loading
}