在父视图中渲染elementReference

Question

所以我有这个：

父组件：

<child-component></child-component>
<!-- I want to render child component reference here -->
<ng-template #renderHereRef></ng-template>

子组件：

<ng-template #childRef>
<p>Content</p>
</ng-template>

我想知道是否有一种方法可以在parents组件#renderHereRef中渲染#childRef。也许将#renderHereRef传递给子组件，或者将#childRef输出给父组件，我不知道。我一直在读棱角分明的文档，但我无法让它发挥作用。

非常感谢你。

Answer 1

好的，我想我明白了。

我已经使其工作如下：

parent.component.html:

<child-component #child></child-component>
<!-- I want to render child component reference here -->
<ng-template *ngIf="childComponent" [ngTemplateOutlet]="childRef"></ng-template>

parent.component.ts:

export class ParentComponent implements AfterViewInit {
@ViewChild('child') childComponent: ChildComponent;
childRef: ElementRef;
ngAfterViewInit(): void {
this.childRef = this.childComponent.childRef;
}
}

child.component.html:

<ng-template #childRef>
<p>Content</p>
</ng-template>

子组件.ts:

export class ChildComponent {
@ViewChild('childRef') childRef: ElementRef;
}