2

I created my Angular app with Angular CLI but now I have a problem with router. The app I want to build has some pages that have header and footer but also some pages that don't, like login page for example. So I need a way to share the layout with header and footer for the pages which need it and to use other layout for the ones that don't. What's the right approach for this?

My first idea was to have one route with header and footer which would be parent to all other routes which need it, but I can't find a way to share the same parent across multiple routing modules. The only way to specify parent child relation I was able to find in the docs is through a list of children when defining a route but then I need to have all the routes defined in the same place which I'd like to avoid.

Second idea was to use secondary routes and I tried with defining app.component.html with primary outlet for content and two secondary outlets for header and footer but then I wasn't able to access secondary outlet from the feature routing module.

Third idea was to have parent route with the same component for each page that has header and footer. That shared component would specify header and footer but the problem here is that then header and footer would be instantiated each time user navigates to a different feature so that would reset their state.

With ui-router I was using in AngularJS this was really easy to do with named views and ability to specify shared parent state. I'd really appreciate pointing in the right direction here.

4

2 回答 2

0

您可以在页脚组件中订阅路由器，然后根据路由隐藏它。

1）最简单的黑客方式就是简单地隐藏它

页脚.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 中粘贴参数并在主应用程序或服务中订阅。

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;
    });
  });
于 2017-04-21T19:44:35.443 回答
0

像这样的东西会起作用吗？

-- 应用组件（带路由器插座）

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

------ 要在父组件的路由器出口中显示的子组件

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

于 2017-04-21T19:16:48.227 回答