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

Question

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

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

ComponentA.html

cmake version 3.15.2

ComponentA.ts

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

ComponentB.html

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

ComponentB.ts

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

Answer 1

您可以尝试一下 组件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>

Answer 2

尝试一下

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';