: 코드에서구성 요소에 하위 노드가 있는지 확인하는 방법 <template></template>? 예를 MyComponent
<div [my-component]="'text'"></div>
내가 노드 자체 (<div>) 인 this.viewContainerRef있다.
그러나 사용자가 myComponent 자사의 템플릿을 추가 할 수 있습니다, 그래서 그는이 작업을 수행합니다
<template> 노드와 사용이 있다면 내가 확인할 수있는 방법 코드입니다/그 innerHTML을 읽어
<div [my-component]="'text'">
<template>
...
</template>
</div>
?
템플릿이 정의되고 html 일 때 ContentChild (TemplateRef)를 사용할 수 있습니다. 다음은 그 예입니다. 이것은 Angular 2입니다. Angular 4 '* ngIf의 경우 else block을 사용할 수 있습니다.
@Component({
selector: '[my-component]',
template: `
my-component with input {{v}}
<ng-container *ngIf="tpl">
Template block:
<ng-container [ngTemplateOutlet]="tpl"></ng-container>
</ng-container>
<ng-container *ngIf="!tpl">
No Template block: <ng-content></ng-content>
</ng-container>
`
})
export class MyComponent {
@Input('my-component') v : string;
@ContentChild(TemplateRef) public tpl: TemplateRef;
}
@Component({
selector: 'my-app',
template: `
<div>
<div [my-component]="'text'">
<template><pre>hi there</pre></template>
</div>
<hr>
<div [my-component]="'text1'">
aaa
</div>
</div>
`,
})
export class App {
constructor() {
}
}
이 구성 요소를 사용할 사용자 관점에서 작동하고 이해하기 쉽고 또한 사용하기 쉽습니다. 고맙습니다! – AngularOne
각도 4를 사용하고 있습니까? –
의 각도는 2이지만 곧 업데이트 될 수 있습니다. – AngularOne
각도 2에서는 DOM에 ''요소가 없을 것입니다. Angular 4에서 ''은''으로 이름이 변경되어 DOM에 ''이 추가됩니다. ''을 사용하면 지원 중단 경고가 발생하므로 Angular4에 대해서는 잘 모르겠습니다. ' '이 Angular5에서만 해제되는지, 아니면 이미 시도 되었다면 (실제로 시도하지 않았는지), 요소가 실제로 존재하는지 확인하십시오. –