Несколько экземпляров одного и того же templateRef отображаются только один раз - PullRequest
0 голосов
/ 13 марта 2020

Извините, если это глупый вопрос, но я новичок в Angular. Я пытаюсь создать пользовательский компонент select- Angular и использую следующую идею:

<app-select>
   <app-option key="key1">complexHTML1</app-option>
   <app-option key="key2">complexHTML2</app-option>
</app-select>

Затем в select.component.html

<button mat-button [matMenuTriggerFor]="menu">
    <ng-container *ngTemplateOutlet="selectedOption.template"></ng-container>
</button>
<mat-menu #menu="matMenu">
    <button mat-menu-item *ngFor="let option of options" (click)="select(option.key)">
        <ng-container *ngTemplateOutlet="option.template"></ng-container>
    </button>
</mat-menu>

в select.component.html

@Component(...)
export class SelectComponent implements AfterContentInit {
    @ContentChildren(OptionComponent) inputOptions: QueryList<OptionComponent>;

    options: OptionComponent[];
    selectedOption: OptionComponent;

    public ngAfterContentInit(): void {
        this.selectedOption = this.inputOptions.first;
        this.options = this.inputOptions.toArray();
    }

    select(key: string) {
        this.selectedOption = this.options.find(o => o.key == key);
    }
}

и для option.component

<ng-template>
    <ng-content></ng-content>
</ng-template>
@Component(...)
export class OptionComponent {
    @Input() public key: string;

    @ViewChild(TemplateRef) template: TemplateRef<any>;
}

Я также подготовил для нее стек-блиц по адресу: https://stackblitz.com/edit/angular-material-playground-bt8wjv?file=src / app / app.module.ts

Проблема заключается в том, что элементы отображаются в подпунктах меню «Материал», а не в кнопке «Основная» меню, показывающей, какой элемент выбран. Там контент просто пустой. Я пытался скопировать TemplateRef et c. но, кажется, когда он используется, когда он каким-то образом израсходован.

enter image description here

Вместо «Контент должен быть здесь» Кнопка «main» должна отображать либо «en», либо «de», в зависимости от того, что выбрано.

Я также попытался использовать ng-template вместо этого и отобразить его в al oop несколько раз. Однако это сработало, как и ожидалось.

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