[英]Passing Routerlink to child component
I create a component in my shared module, it is header component so in all of my components I want to call this. 我在共享模块中创建了一个组件,它是标头组件,因此在我所有的组件中我都想称之为。
In my shared component, let call it app-header component, I want to accept input Title: string, buttonName: string and buttonLink: any (since I am confused) my component: 在我的共享组件中,将其称为app-header组件,我要接受输入Title:string,buttonName:string和buttonLink:任意(因为我感到困惑)我的组件:
import { Component, OnInit, Input } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-app-header',
templateUrl: './app-header.component.html',
styleUrls: ['./app-header.component.less']
})
export class AppHeaderComponent implements OnInit {
@Input() title: string;
@Input() buttonName: string;
@Input() buttonLink: any;
constructor() { }
ngOnInit() {
}
}
my app.header.html 我的app.header.html
<div class='row border-bottom my-4 align-middle apptitle'>
<div class="col-8 my-2">
<div>
<h3> {{title}}</h3>
</div>
</div>
<div class="col-4 my-2 text-right">
<button class="btn btn-primary pull-right" [routerLink]={{buttonLink}}>{{buttonName}}</button>
</div>
</div>
I pass use this component in my other component : 我通过在其他组件中使用此组件:
my shared module: 我的共享模块:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedComponent } from './shared.component';
import { AppHeaderComponent } from './app-header/app-header.component';
@NgModule({
imports: [
CommonModule,
],
providers: [],
declarations: [
SharedComponent,
AppHeaderComponent],
exports:[
AppHeaderComponent,
]
})
export class SharedModule { }
My problem is I don't know how to pass the link so the routerlink will work. 我的问题是我不知道如何传递链接,以便routerlink可以工作。 Any idea how to pass the link / router link in proper way ?
知道如何以正确的方式传递链接/路由器链接吗? the routes belong to the component's module who call it.
路由属于调用它的组件模块。
I have many lazy loaded modules which will use this shared component. 我有许多延迟加载的模块,它们将使用此共享组件。 So I guess the route should be able to redirect/call link from its caller component module.
因此,我想路由应该能够从其呼叫者组件模块重定向/呼叫链接。
Edited: add more information 编辑:添加更多信息
Shared Module : AppHeaderComponent (this has no Routes) 共享模块:AppHeaderComponent(此路由没有)
AdminModule: AdminComponent -> call AppHeaderComponent inside (AdminModule has Routes) AdminModule:AdminComponent->调用内部的AppHeaderComponent(AdminModule具有路由)
UserMoudule: UserComponent -> call AppHeaderComponent inside (UserModule has Routes) UserMoudule:UserComponent->在内部调用AppHeaderComponent(UserModule具有路由)
I need AppHeaderComponent to link to correct routeLink. 我需要AppHeaderComponent链接到正确的routeLink。
Example: in UserComponent: 示例:在UserComponent中:
<app-app-header
[title]= "'Users'"
[buttonName]="'Create New'"
[buttonLink]="['/user/create']"
></app-app-header>
I think you need a little bit change your code. 我认为您需要一点点更改代码。 You need to pass your link by using another construction.
您需要使用其他构造来传递链接。 [routerLink]="buttonLink".
[routerLink] = “buttonLink”。
More about template expression and interpolation you can read on official documentation of angular 有关模板表达和插值的更多信息,您可以阅读angular的官方文档。
To make routing work in your SharedModule
, you'll also have to add the RouterModule
to your imports
array. 要使路由在
SharedModule
工作,还必须将RouterModule
添加到imports
数组。
...
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
CommonModule,
RouterModule
],
...
})
export class SharedModule {}
Also, in your HeaderComponent
, you'll need to fix the routerLink
assignment: 另外,在
HeaderComponent
,您需要修复routerLink
分配:
...
<button
class="btn btn-primary pull-right"
[routerLink]="buttonLink">
{{buttonName}}
</button>
...
And you should be using this component like this(WITHOUT []
): 而且您应该像这样使用该组件(WITHOUT
[]
):
<app-app-header
[title]="'Organisations'"
[buttonName]="'Create New'"
[buttonLink]="'/admin/user/create'">
</app-app-header>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.