我在共享模块中创建了一个组件,它是标头组件,因此在我所有的组件中我都想称呼它。
在我的共享组件中,叫它app-header组件,我要接受输入标题: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() {
}
}
我的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>
我在其他组件中使用了此组件:
我的共享模块:
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 { }
我的问题是我不知道如何传递链接,以便routerlink可以工作。 知道如何以正确的方式传递链接/路由器链接吗?这些路由属于调用它的组件模块。
我有许多延迟加载的模块,它们将使用此共享组件。因此,我认为路由应该能够从其呼叫者组件模块重定向/呼叫链接。
已编辑:添加更多信息
共享模块:AppHeaderComponent(没有路由)
AdminModule:AdminComponent->在内部调用AppHeaderComponent(AdminModule具有路由)
UserMoudule:UserComponent->在其中调用AppHeaderComponent(UserModule具有路由)
我需要AppHeaderComponent才能链接到正确的routeLink。
示例: 在UserComponent中:
<app-app-header
[title]= "'Users'"
[buttonName]="'Create New'"
[buttonLink]="['/user/create']"
></app-app-header>
答案 0 :(得分:0)
我认为您需要一点点更改代码。您需要使用其他构造来传递链接。 [routerLink] =“ buttonLink”。
有关模板表达和内插的更多信息,您可以在official documentation of angular上阅读
答案 1 :(得分:0)
要使路由在SharedModule
中起作用,还必须将RouterModule
添加到imports
数组中。
...
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
CommonModule,
RouterModule
],
...
})
export class SharedModule {}
此外,在您的HeaderComponent
中,您需要修复routerLink
分配:
...
<button
class="btn btn-primary pull-right"
[routerLink]="buttonLink">
{{buttonName}}
</button>
...
您应该像这样使用此组件(没有[]
):
<app-app-header
[title]="'Organisations'"
[buttonName]="'Create New'"
[buttonLink]="'/admin/user/create'">
</app-app-header>