角路由器 - 如何通过多个路由模块共享父路由

Question

我用Angular CLI创建了我的Angular应用，但现在我遇到了路由器问题。我想要构建的应用程序有一些页眉和页脚，但也有一些页面没有，例如登录页面。所以我需要一种方法来为需要它的页面分配页眉和页脚的布局，并为那些不需要的页面使用其他布局。什么是正确的方法呢？

我的第一个想法是有页眉和页脚这将是父到需要它的所有其他路线一条路线，但我不能找到一种方法，让多个路由模块相同的父。在文档中能够找到的父子关系的唯一方法是在定义路由时通过子列表，但是然后我需要将所有路由定义在我想避免的相同位置。

第二个想法是使用辅助路由，我尝试将app.component.html定义为内容的主要插座和用于页眉和页脚的两个辅助插座，但之后我无法从功能路由模块访问辅助插座。

第三个想法是为具有页眉和页脚的每个页面使用相同组件的父路由。该共享组件将指定页眉和页脚，但这里的问题在于，每次用户导航到不同的功能时，页眉和页脚都会实例化，以便重置其状态。

随着我使用AngularJS UI的路由器，这是很容易与命名视图，并指定共享父状态的能力去做。我真的很感激在这里指出正确的方向。

Answer 1

会这样的工作？

- 应用组件（与路由器出口）

----父组件（具有页眉，页脚和子路由器出口）

------要内所显示的子组件父组件的路由器出口

----其他组件（如没有页眉或页脚登录）

Answer 2

您可以订阅你的页脚组件内部的路由器，只是隐藏它基于的航线。

1）最简单的黑客十岁上下的方式是简单地将其隐藏

footer.component.ts

@HostBinding('style.display') 
display :string = 'block'; 

constructor(private router: Router) {} 

ngOnInit() { 
    this.router.events.subscribe((val) => { 

    if (val instanceof NavigationEnd) { 
    this.display = 'block'; 
    if (val.url == '/hidefooterroute') { 
     this.display = 'none'; 
    } 
    } 
... 

2）另一种方法可以做到这一点是要坚持的路线PARAMS .data并在主应用或服务内部订阅。

someRoutes = [ 
    { path:'awesome', data:{ showFooter: false, title: 'This is page is too awesome for a footer'}, loadChildren: "./awesome.module#awesomeModule" } ]; 

... 

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') 
    .subscribe((route) => { 
    // do things with route 
    route.data.subscribe((data) => { 
     // do things with route data 
     this.showFooter = data.showFooter; 
    }); 
    });