Повторное использование компонента в другом компоненте, но изменение имени кнопки (Angular 4+)?

Question

У меня есть компонент (componentA), который использует другой компонент (componentB) в своем HTML. У ComponentB есть кнопка, где заголовок является чем-то другим, но я хотел бы изменить имя кнопки в ComponentA.

ComponentA использует кнопку componentB для перехода на другую страницу, но у ComponentB есть кнопка, которая открывает форму. Навигация работает и все, но я просто хотел бы изменить название кнопок, когда на другой странице.

ComponentA.html

<div>
    <component-b (click)="buttonEdit()"></component-b>
</div>

ComponentA.ts

public buttonEdit(): void {
    this.router.navigate(['/users']);
  }

ComponentB.html

<button (click)="openModal()">Add Users</button>

ComponentB.ts

 @Input() buttonEdit: () => void;

Answer 1

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

Компонент A.tmpl:

<div>
    <component-b (click)="buttonEdit()" [buttonName]="buttonName()" [backgroundColor]="backgroundColor()"></component-b>
</div>

Компонент A.ts:

public backgroundColor(): string {
  ...
  return backgroundColor;
}

Компонент B.tmpl:

<div [ngStyle]="{'background-color': backgroundColor}"></<div>

Компонент B.ts:

@Input() backgroundColor: string = 'green';

Answer 2

Вы можете попробовать этот Компонент B.tmpl:

<button (click)="openModal()">{{buttonName}}</button>

Компонент B.ts:

@Input() buttonEdit: () => void;
@Input() buttonName: string = 'Add Users';

Компонент A.ts:

public buttonEdit(): void {
  this.router.navigate(['/users']);
}
public buttonName(): string {
  ...
  return buttonName;
}

компонентA.tmpl:

<div>
    <component-b (click)="buttonEdit()" [buttonName]="buttonName()"></component-b>
</div>