在另一个组件中重用一个组件但更改按钮名称（Angular 4+）？

Question

我有一个组件 (componentA) 在其 HTML 中使用另一个组件 (componentB)。 ComponentB 有一个按钮，其中的标题是别的东西，但我想更改 ComponentA 中按钮的名称。

ComponentA 使用 componentB 按钮导航到另一个页面，但 ComponentB 具有打开表单的按钮。导航工作正常，但我只想在按钮位于不同页面时更改按钮的名称。

组件A.html

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

组件A.ts

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

组件B.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>