Как я могу расширить компонент mat-select в Material Angular 8? - PullRequest
Новая
       63

Как я могу расширить компонент mat-select в Material Angular 8?

1 голос
/ 19 июня 2019

Я хотел бы создать свой собственный компонент select, расширив компонент Angular Material 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>

1 Ответ

0 голосов
/ 10 июля 2019

Это не прямой ответ на технические вопросы вашего вопроса, но есть еще один способ достичь того, чего вы пытаетесь достичь.

передать параметры в виде массива, подобного этому 

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>
...