父级中的动态子组件
父级中的动态子组件
提问于 2017-06-27 09:04:36
我正在构建一个应用程序与Angular4和Vmware的清晰用户界面的角度。我有一个导航应用程序的主标题。应用程序中有一些视图，不需要侧边栏，也不需要其他视图。当用户导航到某个视图时，我希望显示一个特定于特定视图的侧边栏(如果视图有一个)。我还在应用程序中使用模块级路由。
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 { }我是MainComponent
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>在主组件中，我有这样的设置
+-- dashboard
+-- sales
| +-- sidenav
+-- sidenav
| +-- sidenav.component.html
| +-- sidenav.component.ts
+-- main-routing.module.ts
+-- main.component.html
+-- main.component.ts
+-- main.module.ts我的问题是，如果将app-sidenav属性设置为true，如何将特定于特定视图的不同的sidenav组件注入到showSideNav组件中。如有任何建议或联系将不胜感激。
回答 1
Stack Overflow用户
发布于 2017-08-17 13:45:17
我认为解决用例的最干净的方法就是将布局的一部分移动到实际的路由组件上。现在，您的主模板中包含了以下内容：
<div class="content-container">
<div class="content-area">
<router-outlet></router-outlet>
</div>
<nav class="sidenav" *ngIf="showSideNav">
<app-sidenav></app-sidenav>
</nav>
</div>假设您的销售模板如下所示：
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>通过将sidenav移动到路由组件中，您的主模板如下：
<div class="content-container">
<router-outlet></router-outlet>
</div>你的销售模板变成：
<div class="content-area">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<nav class="sidenav">
<sales-sidenav></sales-sidenav>
</nav>如果组件没有sidenav，就不要将sidenav放在模板中。不需要*ngIf。其结果是，您不再使用sidenav信息污染您的路由，您只需将其留给处理路由本身的组件，它将成为应该拥有特定sidenav逻辑的组件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44776221
复制相关文章
相似问题
腾讯云开发者
