Angular 4+ Передача TemplateRef в качестве аргумента метода не отображает содержимое шаблона
Я постараюсь быть максимально понятным в своем объяснении.
Это вопрос:
То, что я хочу сделать, это иметь модальный компонент с одним методом для open
это, который получает модальное содержание.
Я хочу использовать это так:
// The host component
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
@ViewChild('akamodal')
private akamodal: AkaModalComponent;
@ViewChild('akalogin')
private akalogin: TemplateRef<any>;
public openLogin() {
this.akamodal.open(this.akalogin);
}
}
Здесь компонент, где находится основной макет
<!-- The host component template -->
<!-- The modal component -->
<aka-modal #akamodal></aka-modal>
<!-- The template to be included in the modal -->
<ng-template #akalogin>
<aka-login></aka-login>
</ng-template>
<!-- this is a test with a direct reference to the template, and it works just fine -->
<ng-container *ngTemplateOutlet="akalogin"></ng-container>
И последнее, но не менее важное, модальный компонент
@Component({
selector: 'aka-modal',
templateUrl: './aka-modal.component.html',
styleUrls: ['./aka-modal.component.scss']
})
export class AkaModalComponent {
public template: TemplateRef<any>;
public opened: boolean = false;
public open(template: TemplateRef<any>) {
this.template = template;
this.opened = true;
}
public close() {
this.opened = false;
}
}
И модальное расположение
<div *ngIf="opened">
<h3 class="modal-title">I have a nice title</h3>
<!-- Here Im using the templateRef finally -->
<ng-container *ngTemplateOutlet="template"></ng-container>
</div>
В этом примере, использование ng-container с ngTemplateOutlet рядом с шаблоном, оно работает очень хорошо, но когда я пытаюсь передать шаблон в качестве ссылки, это не так, когда появляется модальное окно, я могу просто увидеть название, но не компонент akalogin.
Может кто-нибудь подсказать мне, что я делаю не так? Заранее большое спасибо