Передача Routerlink дочернему компоненту

Question

Я создаю компонент в своем общем модуле, это компонент заголовка, поэтому во всех моих компонентах я хочу назвать это.

В моем совместно используемом компоненте, пусть он будет называться компонентом заголовка приложения, я хочу принять входные данные Title: string, buttonName: string и buttonLink: any (поскольку я запутался) мой компонент:

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

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

Моя проблема в том, что я не знаю, как передать ссылку, чтобы работала ссылка на маршрутизатор. Любая идея, как правильно передать ссылку / маршрутизатор? маршруты принадлежат модулю компонента, который его вызывает.

У меня есть много ленивых загруженных модулей, которые будут использовать этот общий компонент. Поэтому я предполагаю, что маршрут должен быть в состоянии перенаправить / вызвать ссылку из модуля компонента вызывающего абонента.

Отредактировано: добавить дополнительную информацию

Общий модуль: 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

Чтобы маршрутизация работала в вашем 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>

Answer 2

Я думаю, вам нужно немного изменить свой код. Вы должны передать свою ссылку, используя другую конструкцию. [RouterLink] = "buttonLink".

Подробнее о шаблонном выражении и интерполяции вы можете прочитать на официальной документации угловых