Можно ли передать параметры mat в мой пользовательский компонент mat-select с помощью ng-content? - PullRequest
Новая
       1

Можно ли передать параметры mat в мой пользовательский компонент mat-select с помощью ng-content?

0 голосов
/ 21 октября 2019

У меня есть пользовательский компонент выбора, и я хочу использовать ng-content для передачи в него своих параметров, например: 

<lib-select [(selected)]="selected" (selectedChange)="onChange($event)">
            <mat-option [value]="0">Value 1</mat-option>
            <mat-option [value]="1">Value 2</mat-option>
            <mat-option [value]="2">Value 3</mat-option>
            <mat-option [value]="3">Value 4</mat-option>
            <mat-option [value]="4">Value 5</mat-option>
</lib-select>

Это, похоже, не работает. Сначала даже не отображались параметры. Я нашел взлом, чтобы заставить их отображать, но я все еще не могу ничего выбрать. Вот мой компонент: 

    <mat-select panelClass="select" disableRipple (selectionChange)="onChange()" [(value)]="selected" disableOptionCentering>
        <mat-select-trigger>{{selected}}</mat-select-trigger>
        <!-- mat-option below is required to render ng-content in mat-select. this is an ugly hack and there might be a better workaround for this -->
        <mat-option [value]="" style="display: none;"></mat-option>
        <ng-content></ng-content>
    </mat-select>

Есть ли способ заставить эту работу или mat-select просто не работает с ng-content?

Я знаю, что мог бы использовать @Input() дляпередать опции в компонент, но я думаю, что код выглядит намного чище при использовании ng-content.

РЕДАКТИРОВАТЬ: кажется, что я на самом деле могу выбирать элементы. Проблема в том, что я могу выбрать несколько вариантов, и возникает эффект ряби, даже если на моем mat-select.

существует disableRipple.

1 Ответ

0 голосов
/ 22 октября 2019

есть обходной путь. поместите ng-контент в div и спрятайте его и создайте параметры, запрашивающие ContentChildren (MatOption), см. пример в stackblitz

Компонент 

import {Component, ContentChildren, AfterViewInit, QueryList} from "@angular/core";
import { MatOption } from "@angular/material/core";

@Component({
  selector: "custom-select",
  template: `
    <mat-form-field>
      <mat-label>Favorite food</mat-label>
      <mat-select>
        <ng-container *ngIf="yet">
          <mat-option *ngFor="let option of options" [value]="option.value">
            {{ option.viewValue }}
          </mat-option>
        </ng-container>
      </mat-select>
    </mat-form-field>
    <div style="display:none" *ngIf="!yet">
      <ng-content></ng-content>
    </div>
  `
})
export class CustomSelect implements AfterViewInit {
  @ContentChildren(MatOption) queryOptions: QueryList<MatOption>;
  options: any[];
  yet: boolean;
  ngAfterViewInit() {
    this.options = this.queryOptions.map(x => {
      return { value: x.value, viewValue: x.viewValue };
    });
    setTimeout(() => {
      this.yet = true;
    });
  }
}

использовать 

<custom-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
</custom-select>
...