Общий компонент с routerLink @Input ()

Question

Я хочу создать общий компонент, который имеет кнопку и при нажатии направляет пользователя куда-либо. Маршрут должен исходить от потребителя компонента. Как мне этого добиться?

---

Я думаю, что хочу сделать маршрут параметром @Input(). Это хороший подход?

Общий компонент

@Component({
  selector: 'some-component',
  templateUrl: '<button [how do I bind the router parameters?]>Go Somewhere</button>'
})

В каком-то другом модуле

<some-component [routerLink]="['blah', someDynamicValue]"></some-component>

<some-component [routerLink]="['blah-2', someDynamicValue2]" [routerLinkActive]="['is-active']" 
[routerLinkActiveOptions]="{ exact: true }"></some-component>

---

Конечно, кто-то уже спрашивал это раньше? Я не могу отследить это ...

Answer 1

Да @Input() - хороший подход

Попробуйте это

Общий компонент

@Component({
  selector: 'some-component',
  template: `<button [routerLink]="componentLink" 
     [routerLinkActive]="['is-active']" 
     [routerLinkActiveOptions]="{ exact: true }">Go Somewhere</button>`
})
export class SomeComponent{

  @Input()
  componentLink: any[];

  //Initialize it as an empty array for default values
  @Input()
  componentLinkActive: string[] = [];

  //Same goes here
  @Input()
  componentLinkActiveOptions: {exact: boolean} = { exact: false }

}

В каком-то другом модуле

<some-component 
[componentLink]="['blah', someDynamicValue]" 
[componentLinkActive]="['is-active']" 
[componentLinkActiveOptions]="{ exact: true }"></some-component>

А также в свой общий компонентный модуль обязательно импортируйте RouterModule