Question

我有一个名为list的组件，它具有fab-button和icon和tooltip-text，它看起来像这样：

我考虑将其作为通用组件，以便我可以再次使用该组件。因此，我将list组件重新使用在名为 SCHOOL < / strong>和 COLLEGE ：

我很好地重用了list组件，但是我想根据其中存在的组件更改fab-button's图标和tooltip text(i,e add-school)。

手段

1）如果list组件中存在SCHOOL组件，则fab-button icon和tooltip-text应该不同。

2）如果list组件中存在COLLEGE组件，则fab-button icon和tooltip-text应该不同。

如何根据组件动态更改icons和tooltip-text？我没有找到组件可重用性的任何资源。

这是DEMO突袭。

Answer 1

根据您当前的要求，您需要拥有3个@input和1个@Output

  @Input()
  public tooltip;  //<-- pass tooltip text

  @Input()
  public buttonType; //<-- pass button style class

  @Input()
  public contacts;  //<-- pass contact from the college or school

  @Input()
  public add = new EventEmitter(); //<-- Emit Add event so that it can capture in the respective component College or School.

工作演示在这里-https://stackblitz.com/edit/angular-material2-issue-udhiaz

Answer 2

为此，您应该使用@Input。

在列表组件TS文件中，添加输入属性：

 @Input()
 public tooltip;

在模板中，使用此值而不是硬编码值

<button mat-fab color="primary" id="add-button" [matTooltip]="tooltip"><i class="material-icons" >person_add</i></button>

然后，您可以像这样传递值：

<app-list tooltip="Add School"></app-list>

Here is a Stackblitz demo

Answer 3

您可以将数据作为list属性传递到@Input()组件-如果它是tooltip，则可以添加为字符串并将其绑定到html中-如果它是图标，您可以直接发送图标

@Input() tooltips;

从父母<app-list tooltips="Add School"></app-list>传递时

<button mat-fab color="primary" id="add-button" [matTooltip]="tooltips"><i class="material-icons" >person_add</i></button>

现在要传递图标的情况-您可以使用内容投影添加

list.component.html

<div>
    <mat-selection-list  #contact>
        <mat-list-option *ngFor="let contact of contacts">
            <a mat-list-item><span>{{ contact }}</span> </a>
        </mat-list-option>
      </mat-selection-list>
      <ng-content></ng-content>
  </div>

在加载组件时传递图标

<app-list>
   <button mat-fab color="primary" id="add-button" matTooltip="Add School"><i 
     class="material-icons" >person_add</i></button>
</app-list>

通过这种方式，您甚至可以根据加载的组件来更改图标，甚至可以更改工具提示-如果要基于class的名称更改图标，则可以将类名作为另一个@Input()传递给孩子的财产

希望这对您有所帮助-编码愉快：）

重新使用角组件

3 个答案: