правильно передать ng-шаблон компоненту через @ChildContent - PullRequest
0 голосов
/ 30 октября 2018

Я пытаюсь обернуть компонент mat-select в своем собственном пользовательском компоненте, который принимает templateRef для параметров, но, насколько я могу судить, он не получает никаких параметров или не знает, как отобразить они ведут себя как пустой выбор.

Я разместил пример, сравнивающий его с обычным ковриком, здесь: https://stackblitz.com/edit/angular-rifzj8

Вот соответствующие биты из стекаблиц:

// app/select/select.component.ts

import {Component, ContentChild, forwardRef, Input, OnInit, TemplateRef, ViewChild} from '@angular/core';
import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR} from '@angular/forms';
import {NgForOf} from '@angular/common';
import {MatSelect} from '@angular/material';


export const SELECT_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => SelectComponent),
  multi: true,
};


@Component({
  selector: 'app-select',
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.css'],
  providers: [SELECT_VALUE_ACCESSOR]
})
export class SelectComponent implements ControlValueAccessor, OnInit {

  constructor() { }

  @Input() formControl: FormControl;
  @Input() placeholder: string;
  @Input() options: any[];
  
  @ContentChild(TemplateRef) optionTemplate: TemplateRef<NgForOf<any>>;
  @ViewChild(MatSelect) select;

  ngOnInit() {
  }

  registerOnChange(fn: any): void {
    this.select.registerOnChange(fn);
  }

  registerOnTouched(fn: any): void {
    this.select.registerOnTouched(fn);
  }

  setDisabledState(isDisabled): void {
    this.select.setDisabledState(isDisabled);
  }

  writeValue(obj: any): void {
    this.select.writeValue(obj);
  }

}
<!-- app/select/select.component.html -->
<mat-select [formControl]="formControl" [placeholder]="placeholder">
  <ng-template ngFor let-option [ngForOf]="options" [ngForTemplate]="optionTemplate"></ng-template>
</mat-select>


<!-- app/app.component.html -->
<app-select [options]="foods" placeholder="Pick Food">
  <ng-template let-option>
    <mat-option [value]="option.value">
      {{ option.viewValue }}
    </mat-option>
  </ng-template>
</app-select>

Я что-то здесь не так делаю?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...