为什么Angular 10中的ng-template渲染两次？

问题描述

当使用ng-template和ngTemplateOutlet时，我发现存在两次渲染的组件的问题。但是为什么呢？

HTML：

<ng-template #options>
    <h3>I'm template</h3>
    <sidebar-options></sidebar-options>
</ng-template>

<div class="container-fluid">
    <div class="row">
        <aside class="order-2">
            <ng-container *ngTemplateOutlet="options"></ng-container>
        </aside>
        <div class="col order-1">CONTENT</div>
    </div>
</div>

组件：

import { Component,OnInit,Input,ViewChild,ComponentFactoryResolver,ChangeDetectorRef,ViewContainerRef } from '@angular/core';

@Component({
    selector: 'sidebar-options',templateUrl: './sidebar-options.component.html',})
export class SidebarOptionsComponent implements OnInit {
    @ViewChild('container',{ read: ViewContainerRef,static: true }) container: ViewContainerRef;
    @Input('types') types: OptionType[];

    constructor(private cfr: ComponentFactoryResolver) {}

    ngOnInit(): void {
        console.log('ini');
    }
}

如何防止SidebarOptionsComponent呈现两次？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular-template