как я могу сделать обертку, для mat-select, и внутри нее будет другая обертка для mat-option, и использовать ее в других компонентах

Question

как мне сделать обертку для mat-select, и внутри нее будет другая обертка для mat-option и использовать ее в других компонентах

select. html

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

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>

Но я думаю, что, делая все это не то, что вы себе представляете. С некоторой тяжелой работой, может быть, вы можете получить справку о том, что mat-option внутри app-select, но сделать с ней что-нибудь после этого было бы непосильной задачей.

Answer 2

так

опция. 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>

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>