我怎样才能为mat-select做一个包装，在里面再为mat-option做一个包装，并且在另一个组件中使用它。

Question

我怎样才能为mat-select做一个包装，在里面再为mat-option做一个包装，并且在另一个组件中使用它。

选择.html

    <mat-select>
  <app-option></app-option>
</mat-select>

选择.ts

import {
  Component,
  OnInit,
  Input,
  ViewChildren,
  QueryList,
} from '@angular/core';
import { CustFormControlDirective } from 'src/app/forms/cust-form-control';
import { MatFormFieldControl } from '@angular/material/form-field';
import { OptionComponent } from '../option/option.component';

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.scss'],
  providers: [{ provide: MatFormFieldControl, useExisting: SelectComponent }],
})
export class SelectComponent extends CustFormControlDirective<string> {}

option.html

<mat-option></mat-option>

option.ts

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

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

  constructor() {}

  ngOnInit(): void {}
}

app.html

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

Answer 1

关于使用 <app-select> 里面 <mat-form-field>，你必须实现 MatFormFieldControl 介面。你可以看到它 这里，文档上.

关于你 <app-option>我认为这是不可能的，因为... ... MatSelect 料到 MatOption如同其子女:

...
@ContentChildren(MatOption, {descendants: true}) options: QueryList<MatOption>;
...

负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： descentants: true 以上是不足以运行一个跨越您的 app-option 元件，以找到 mat-option 里面的内容。它的工作原理是将内容直接放置在 mat-select ng-content或嵌套 ng-content的，直接放置在 mat-select 比如说，模板。

<mat-select>
  <app-select>
    <mat-option></mat-option>
  </app-select>
</mat-select>

但我觉得这样做并不是你想象的那样。只要努力工作，也许你可以抢到一个参考o，。mat-option 里面 app-select 但之后要想做任何事情，都会是一个压倒性的任务。

Answer 2

所以

option.html

<mat-option [value]="value">{{ text }}</mat-option>

option.ts

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

@Component({
  selector: 'app-option',
  templateUrl: './option.component.html',
  styleUrls: ['./option.component.scss'],

})
export class OptionComponent
  implements OnInit {
  @Input() value: string;
  @Input() text: string;

  ngOnInit(): void {}
}

选择.html

<mat-select>
  <mat-option *ngFor="let option of options" [value]="option.value">{{
    option.text
  }}</mat-option>
</mat-select>

选择.ts

import {
  Component,
  QueryList,
  ContentChildren,
  AfterViewInit,
} from '@angular/core';
import { CustFormControlDirective } from 'src/app/forms/cust-form-control';
import { MatFormFieldControl } from '@angular/material/form-field';
import { OptionComponent } from '../option/option.component';

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.scss'],
  providers: [{ provide: MatFormFieldControl, useExisting: SelectComponent }],
})
export class SelectComponent extends CustFormControlDirective<string>
  implements AfterViewInit {
  @ContentChildren(OptionComponent) options: QueryList<OptionComponent>;

  ngAfterViewInit(): void {}
}

my-app.html

<mat-form-field>
  <app-select>
    <app-option [value]="" [text]="'None'"></app-option>
    <app-option [value]="true" [text]="'True'"></app-option>
    <app-option [value]="false" [text]="'False'"></app-option>
    <app-option [value]="false" [text]="'three'"></app-option>
  </app-select>
</mat-form-field>