我想通过扩展 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>