如何以编程方式设置 MatSelect 的 MatSelectTrigger？

Question

鉴于对 MatSelect 实例的引用，我该如何着手以编程方式设置其 MatSelectTrigger 模板？根据 documentation，有一个可设置的 customTrigger 属性，但我找不到关于 MatSelectTrigger class 或如何动态创建的任何文档一.

我的目标是有一个指令在 MatSelect 上动态设置一个 <mat-select-trigger> 组件以减少复制+粘贴。

与此同时，我在 selectionChange 事件上手动操作 DOM，但这很老套，容易出错。

是否有一种正式且安全的方法，可以在指令内部并引用 MatSelect，为其提供动态触发器模板？

谢谢！

Answer 1

there is a settable customTrigger property, but I wasn't able to find any documentation on the MatSelectTrigger class or how to dynamically create one.

customTrigger 不是可设置的属性。是 @ContentChild 类型。这意味着 mat-select 需要 MatSelectTrigger.

类型的内容投影

这是从 source file:

中摘录的代码

 @ContentChild(MAT_SELECT_TRIGGER) customTrigger: MatSelectTrigger;

解决方案

要向 mat-select-trigger 动态提供不同的模板，您需要创建一个包装器组件，如下所示：

mat-select-wrapper.component.html

<mat-form-field>
  <mat-label>Toppings</mat-label>

  <mat-select [formControl]="toppings" multiple>

    <mat-select-trigger>
      <!-- NOTICE HERE: We inject triggerTemplate into mat-select-trigger -->
      <ng-container *ngTemplateOutlet="triggerTemplate"></ng-container>
    </mat-select-trigger>

    <mat-option *ngFor="let topping of toppingList" 
                [value]="topping">{{topping}}
    </mat-option>

  </mat-select>
</mat-form-field>

mat-select-wrapper.component.ts

import {Component, Input, TemplateRef} from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
  selector: 'app-mat-select-wrapper',
  templateUrl: 'mat-select-wrapper.component.html',
  styleUrls: ['mat-select-wrapper.component.css'],
})
export class MatSelectWrapperComponent {

  // Accept a custom template from outside and display it.
  @Input()
  public triggerTemplate: TemplateRef<any>;

  public toppings = new FormControl();

  public toppingList = ['Extra cheese', 'Mushroom', 'Onion'];
}

使用包装器的父组件

<app-mat-select-wrapper [triggerTemplate]="myTemplate"></app-mat-select-wrapper>

<ng-template #myTemplate>
  Hello! You can provide any kind of HTML here.
</ng-template>

您将需要添加更多 @Input，以便您可以通过包装器将不同的值传递到实际的 mat-select。比如toppingList就是被mat-option.

使用的

如何以编程方式设置 MatSelect 的 MatSelectTrigger？

How do I programmatically set a MatSelect's MatSelectTrigger?

typescript

angular

mat-select

解决方案