angular 2：根据路径改变视图的静态部分

Question

首先，对于奇怪的标题感到抱歉。我找不到更好的摘要。

所以我想要创建一个应用程序，它包含一个基本的 3 部分结构（header/内容/页脚）。根据激活的路由，header 部分应该改变（每个 header 都是一个独立的组件）。

到目前为止，显示的 header 是由 "mainApp.component" 中的 [ngSwitch] 语句确定的，看起来像这样：

<span [ngSwitch]="currentLocation">
    <span *ngSwitchWhen="'/login'"><login-header></login-header></span>
    <span *ngSwitchWhen="'/home'"><home-header></home-header></span>
</span>
<div class="content"><router-outlet></router-outlet></div>
<app-footer></app-footer>

"mainApp.component.ts" 看起来像这样：

import { Component, OnInit } from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';
import {HomeHeaderComponent} from './home-header';
import {LoginHeaderComponent} from './login-header';
import {FooterComponent} from './footer';
import {Router} from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'app',
  templateUrl: 'mainApp.component.html',
  styleUrls: ['mainApp.component.css'],
  directives: [HomeHeaderComponent, LoginHeaderComponent, FooterComponent, ROUTER_DIRECTIVES],
  providers: []
})

export class mainApp implements OnInit {
  public currentLocation: string;
  constructor(public router: Router) {
    this.currentLocation = location.pathname;
  }

  ngOnInit() {

  }
}

当我手动转到 localhost:4200/login 或 localhost:4200/home 时效果很好，因为它呈现 mainApp.component，检查哪个是当前路线并显示 header因此。但是，当我通过例如更改路线时通过

单击按钮

<span class="btn btn-default headerButton homeButton" (click)="navigateToHome()"></span>

其中 navigateToHome() 只是

navigateToHome() {
  this.router.navigate(['/home']);
}

header 保持不变，因为变化检测不会考虑路由变化，因此不会重新运行 [ngSwitch] / 重新渲染 mainApp.component。

我已经考虑过将 header 包含在它们所属的组件模板中，但如果有一种方法可以在主要组件中实现，我更愿意这样做。

如果你们知道如何解决这个问题，或者有更好的方法/其他方式/最佳实践方式，我很高兴听到。

谢谢。

Answer 1

这里的答案是像这样订阅路由器事件：

this.router.events.subscribe((e) => {e instanceof NavigationEnd? this.currentLocation = '/' + e.url.split('/')[1] : ''});

这通常会订阅路由器事件，并在导航成功结束时通过检查返回值的 url 属性来更改 currentLocation 变量。

我在当前路由器版本@angular/routerv3.0.0-alpha8 中（在 post 时）实现了它，它工作得很好。

angular 2：根据路径改变视图的静态部分

angular 2: Changing static parts of the view according to path

javascript

routing

typescript

angular2-changedetection

angular