Извините, если это глупый вопрос, но я новичок в 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](https://i.stack.imgur.com/HUH1E.png)
Вместо «Контент должен быть здесь» Кнопка «main» должна отображать либо «en», либо «de», в зависимости от того, что выбрано.
Я также попытался использовать ng-template
вместо этого и отобразить его в al oop несколько раз. Однако это сработало, как и ожидалось.