<ng-template>@Input 속성으로 찾아야 하는 구성 요소를 만들고 콘텐츠를 반환하려고합니다.
다음은이 구성 요소의 코드입니다.
template.component.ts
import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
@Component({
selector: 'my-template',
templateUrl: './template.component.html'
})
export class TemplateComponent {
@Input() id: string;
templateRef: TemplateRef<any>;
}
template.component.html
<ng-container *ngIf="templateRef" [ngTemplateOutlet]="templateRef"></ng-container>
<ng-template id="1" #template1>
<p>template 1 content</p>
</ng-template>
<ng-template id="2" #template2>
<p>template 2</p>
</ng-template>
다음은이 구성 요소를 사용하는 예입니다.
<h2>Template 1</h2>
<my-template id="template1"></my-template>
<h2>Template 2</h2>
<my-template id="template2"></my-template>
문제는 ID로 특정 템플릿을 찾는 방법입니다.
이 방법으로 시도했지만 작동하지 않습니다.
@ViewChild(this.id, { static: true }) templateRef: TemplateRef<any>;
또한 모든 템플릿을 가져 와서 목록에서 특정 항목을 찾으려고했지만 작동하지 않습니다.
@ViewChildren(TemplateRef) templates: TemplateRef<any>[];
ngAfterViewInit() {
this.templateRef = this.templates.find(template => template.name === id);
}
https://stackblitz.com/edit/angular-my-template-dynamic
누구든지 나를 도울 수 있습니까?
여기에서 해결책을 찾았습니다. ID 별 ViewChildren 템플릿 가져 오기
간단한 지시문을 만든 다음 ID로 템플릿을 가져 오는 데 사용합니다.
TemplateIdDirective
import { Directive, Input, TemplateRef } from '@angular/core';
@Directive({
selector: 'ng-template[id]'
})
export class TemplateIdDirective {
@Input() id: string;
constructor(public template: TemplateRef<any>) { }
}
template.component.ts
@ViewChildren(TemplateIdDirective) private templates: QueryList<TemplateIdDirective>;
ngAfterViewInit() {
this.templateRef = this.getTemplateRefById(this.templates, this.id);
}
getTemplateRefById(templates: QueryList<TemplateIdDirective>, id: string): TemplateRef<any> {
const directive = templates.find(template => template.id === id);
return directive ? directive.template : null;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다