Angular2：渲染/重新加载组件的模板

理想情况下,我需要重新加载/重新呈现组件的模板,但如果有更好的方法,我会很乐意实现它.

期望的行为：

所以,我有一个菜单元素的组件.当(在另一个组件中)我点击一个IBO(某种’客户’,每说)被点击我需要添加(我使用* ngIf)菜单中的新选项,即IBO详细信息和子列表.

IBOsNavigationElement组件(菜单组件)：

@Component({
    selector: '[ibos-navigation-element]',template: `
        <a href="#"><i class="fa fa-lg fa-fw fa-group"></i> <span
                class="menu-item-parent">{{'IBOs' | i18n}}</span>
        </a>
        <ul>
            <li routerLinkActive="active">
                <a routerLink="/ibos/IBOsMain">{{'IBOs Main' | i18n}} {{id}}</a>
            </li>
            <li *ngIf="navigationList?.length > 0">
                <a href="#">{{'IBO Details' | i18n}}</a>
                <ul>
                    <li routerLinkActive="active" *ngFor="let navigatedIBO of navigationList">
                        <a href="#/ibos/IboDetails/{{navigatedIBO['id']}}">{{navigatedIBO['name']}}</a>
                    </li>
                </ul>
            </li>
        </ul>
    `
})
export class IBOsNavigationElement implements OnInit {
    private navigationList = <any>[];


    constructor(private navigationService: NavigationElementsService) {
        this.navigationService.updateIBOsNavigation$.subscribe((navigationData) => {
                this.navigationList.push(navigationData);
                log.d('I received this Navigation Data:',JSON.stringify(this.navigationList));
            }
        );
    }

    ngOnInit() {
    }
}

最初,navigationList将为空[],因为用户没有单击任何IBO(客户端),但只要单击IBO,就会填充列表,因此,我需要在菜单中显示新选项.

使用此代码,当我点击IBO时,< li>元素和它的子项被创建但是：我只看到< li>元件.

问题：

菜单选项已生成,但未由布局样式进行处理.需要使用所有元素对其进行初始化,以便了解如何显示菜单选项.

我需要重新加载该组件的模板才能正确显示菜单.

注意：

如果我使用没有* ngIf的模板,效果很好,但我会从第一时间开始有一个没有意义的IBO详细信息选项,因为初始化时没有点击过IBO.

template: `
        <a href="#"><i class="fa fa-lg fa-fw fa-group"></i> <span
                class="menu-item-parent">{{'IBOs' | i18n}}</span>
        </a>
        <ul>
            <li routerLinkActive="active">
                <a routerLink="/ibos/IBOsMain">{{'IBOs Main' | i18n}} {{id}}</a>
            </li>
            <li>
                <a href="#">{{'IBO Details' | i18n}}</a>
                <ul>
                    <li routerLinkActive="active" *ngFor="let navigatedIBO of navigationList">
                        <a href="#/ibos/IboDetails/{{navigatedIBO['id']}}">{{navigatedIBO['name']}}</a>
                    </li>
                </ul>
            </li>
        </ul>
    `

期望的输出：

在点击任何内容之前(在init上)：

点击IBO(客户端)后：

更新1：

澄清我的意思：

The menu option is generated but not proccessed by the layout styles

如果,我的菜单组件初始化没有* ngIf：

<li>
    <a href="#">{{'IBO Details' | i18n}}</a>
        <ul>
            <li routerLinkActive="active" *ngFor="let navigatedIBO of navigationList">
                <a href="#/ibos/IboDetails/{{navigatedIBO['id']}}">{{navigatedIBO['name']}}</a>
            </li>
        </ul>
</li>

然后布局样式可以根据以下结构生成菜单输出(请参阅图像)：

<li>
   <a>
   <ul>
      <li *ngFor>
         <a>
      </li>
   </ul>
</li>

因此添加符号和子菜单行为等.

但是,如果它在没有所有元素的情况下进行初始化(当* ngIf为false时,< li>并且它的子节点未呈现,因此布局不会将它们考虑在内以绘制/创建菜单)并且这些元素在渲染后添加,然后它们将存在于源代码中,但我们将无法在菜单中看到它们,因为：

>没有创建
>没有子菜单行为

@Component({
    selector: '[ibos-navigation-element]',template: `...`,changeDetection: ChangeDetectionStrategy.OnPush
})

constructor(
    private changeDetector: ChangeDetectorRef,) {}

this.changeDetector.markForCheck();