Question

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

我的第一个想法是有一个带有页眉和页脚的路由，它是所有其他需要它的路由的父路由，但我找不到在多个路由模块之间共享同一个父路由的方法。在文档中找到的父子关系的唯一方法是在定义路径时通过子列表，但是我需要在同一个地方定义所有路径，我想避免。

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

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

使用我在AngularJS中使用的ui-router，使用命名视图和指定共享父状态的能力非常容易。我真的很感激在这里指出正确的方向。

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）另一种方法是在route.data中粘贴params并在主应用程序或服务中订阅。

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;
    });
  });

角度路由器 - 如何跨多个路由模块共享父路由

2 个答案: