Question

我想通过扩展Angular材质组件mat-select来创建自己的选择组件，并像下面那样使用我的自定义app-select组件

<app-select>
  <mat-option>Value1</mat-option>
  <mat-option>Value2</mat-option>
  <mat-option>Value3</mat-option>
  <mat-option>Value4</mat-option>
</app-select>

我在stackblitz中做了一个例子，几乎可以使它工作。问题我遇到的问题是，选择选项后，下拉面板不会关闭。

https://stackblitz.com/edit/angular-vdyjcy?file=src%2Fapp%2Fselect%2Fselect.component.html

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.css']
})
export class SelectComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

<mat-form-field>
  <mat-select>
    <mat-option>
      None
    </mat-option>
    <ng-content></ng-content>
  </mat-select>
</mat-form-field>

Answer 1

这不是对问题的技术性的直接答案，但是有另一种方法可以实现您要达到的目标。

将选项作为这样的数组传递

class ParentComponent {
  public options = [
    'Value1',
    'Value2',
    'Value3',
    'Value4',
    'Value5'
  ];
}

<app-select [options]="options">
</app-select>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.css']
})
export class SelectComponent implements OnInit {

  @Input() options: string[];

  constructor() { }

  ngOnInit() {
  }

}

<mat-form-field>
  <mat-select>
    <mat-option>
      None
    </mat-option>
    <mat-option *ngFor="let option of options">{{ option }}</mat-option>
  </mat-select>
</mat-form-field>

Answer 2

您将需要扩展MatSelect

@Component（{ ... 提供者：[{提供：MatFormFieldControl，useExisting：EfilingSelect}] }）

导出类SelectComponent扩展了MatSelect { ... }

MatSelect将实现OnInit

如果要在mat-form-field元素中使用组件，则可能需要添加提供程序

如何在Material Angular 8中扩展垫选择组件？

2 个答案: