將Routerlink傳遞給子組件

Question

我在共享模塊中創建了一個組件，它是標頭組件，因此在我所有的組件中我都想稱之為。

在我的共享組件中，將其稱為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() {
  }

}

我的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>

Answer 1

我認為您需要一點點更改代碼。 您需要使用其他構造來傳遞鏈接。 [routerLink] = “buttonLink”。

有關模板表達和插值的更多信息，您可以閱讀angular的官方文檔。

Answer 2

要使路由在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>
...

而且您應該像這樣使用該組件（WITHOUT [] ）：

<app-app-header 
  [title]="'Organisations'" 
  [buttonName]="'Create New'" 
  [buttonLink]="'/admin/user/create'">
</app-app-header>