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

我有一个组件（componentA），它在HTML中使用另一个组件（componentB）。 ComponentB有一个按钮，标题是其他内容，但我想更改ComponentA中按钮的名称

ComponentA使用componentB按钮导航到另一个页面，但componentB有打开表单的按钮。导航和一切工作，但我只想改变按钮的名称，当它在不同的页面

ComponentA.html

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

ComponentB.html

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

你可以试试这个 组件B.tmpl：

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

A.ts部分：

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

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

组件A.tmpl：

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

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

试试这个

组件A.tmpl：

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

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

组件B.tmpl：

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

---

如果我想在componentA中修复它的CSS，有没有更简单的方法呢？你可以使用ngStyle

它不起作用…它仍然使用componentA背景色不，你应该从组件A接收背景色，比如buttonName
<div [ngStyle]="{'background-color': backgroundColor}"></<div>

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