Angular 在父组件中动态生成子组件

我正在使用Angular4和Vmware的Clarity UI为Angular构建一个应用程序。我有一个用于导航应用程序的主标题。 应用程序中有一些视图不需要侧边栏，其他视图则需要侧边栏。 当用户导航到某个视图时，如果该视图有一个侧边栏，我想显示该视图特定的侧边栏。 我还在应用程序中使用模块级路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainComponent } from './main.component';

const routes: Routes = [
    {
        path: '', component: MainComponent,
        children: [
            {
                path: 'dashboard',
                loadChildren: './dashboard/dashboard.module#DashboardModule',
                data: {
                    title: 'Dashboard',
                    showSideNav: false
                }
            },
            {
                path: 'sales',
                loadChildren: './sales/sales.module#SalesModule',
                data: {
                    title: 'Sales',
                    showSideNav: true
                }
            }
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class MainRoutingModule { }

这是主要部件

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';

@Component({
    selector: 'app-main',
    templateUrl: './main.component.html',
    styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {

    showSideNav: Boolean = false;

    constructor(public router: Router, public activatedRoute: ActivatedRoute) { }

    setSidenavState() {
        this.router.events
            .filter(event => event instanceof NavigationEnd)
            .map(() => this.activatedRoute)
            .map(route => {
                while (route.firstChild) {
                    route = route.firstChild;
                }

                return route;
            })
            .filter(route => route.outlet === 'primary')
            .mergeMap(route => route.data)
            .subscribe((event) => { 
                this.showSideNav = event['showSideNav'];
                console.log(this.showSideNav);
            });
    }
    ngOnInit() {
        this.setSidenavState();
        if (this.router.url === '/') {
            this.router.navigate(['/dashboard']);
        }
    }

}

这是主模板

<clr-main-container>
    <header class="header header-6">
        <div class="branding">
            <a routerLink="/dashboard" class="brand nav-link">
                <img src="assets/img/logo-white.png">
            </a>
        </div>
        <div class="header-nav">
            <a routerLink="/dashboard" routerLinkActive="active" class="nav-link nav-text">Dashboard</a>
            <a routerLink="/sales" routerLinkActive="active" class="nav-link nav-text">Sales</a>
            <a href="" class="nav-link nav-text">Purchases</a>
            <a href="" class="nav-link nav-text">Contacts</a>
            <a href="" class="nav-link nav-text">Reports</a>
        </div>
    </header>
    <div class="content-container">
        <div class="content-area">
            <router-outlet></router-outlet>
        </div>
        <nav class="sidenav" *ngIf="showSideNav">
            <app-sidenav></app-sidenav>
        </nav>
    </div>
</clr-main-container>

我的问题是，如果

showSideNav

属性设置为

true

，如何将特定于特定视图的不同sidenav组件注入

app sidenav

组件中。

---

如果您有任何建议或链接，我们将不胜感激。

我相信解决您的用例的最干净的方法就是将一点布局移动到实际的路由组件上。 现在，您的主模板中有以下内容：

假设您的销售模板如下所示：

Lorem ipsum Door sit amet，是一位杰出的领导者

通过将sidenav向下移动到路由组件中，您的主模板将变为：

您的销售模板将变成：

Lorem ipsum dolor sit amet，是一位杰出的献身者

如果组件没有sidenav，就不要将sidenav放在其模板中。无需使用

*ngIf

。

---

其结果是，您不再使用sidenav信息污染您的路线，您只需将其留给处理路线本身的组件，它就应该拥有特定的sidenav逻辑。

为什么不在必要的条件下使用

*ngIf

？如果模板在不同的sidenav组件之间共享，我建议您在“数据”（在Routes中定义）中添加一些配置，并通过输入道具将其传递给sidenav组件。@BunyaminoSkuner sidenav组件有不同的模板。然后，不要将showSideNav设置为true或false，有某种类型的开关箱，将不同的sidenav组件称为Abrarsuggested@BunyaminCoskuner我会试试，然后把我的解决方案贴在这里

+-- dashboard
+-- sales
|   +-- sidenav
+-- sidenav
|   +-- sidenav.component.html
|   +-- sidenav.component.ts
+-- main-routing.module.ts
+-- main.component.html
+-- main.component.ts
+-- main.module.ts