1

首先，对不起这个奇怪的标题。我找不到更好的总结。

所以我想要创建一个包含基本 3 部分结构（页眉/内容/页脚）的应用程序。根据活动的路由，标头部分应该更改（每个标头都是自己的组件）。

到目前为止，显示的标头由“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() {

  }
}

当我转到 mylocalhost:4200/login或localhost:4200/home手动时，这工作得很好，因为它呈现 mainApp.component，检查哪个是当前路由并相应地显示标题。但是，当我通过例如按钮单击更改路线时

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

navigateToHome ()很简单

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

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

我已经考虑过在它们所属的组件模板中包含标题，但如果有办法在主组件中做到这一点，我会更喜欢。

如果你们对如何解决这个问题有任何想法，或者如何更好地/另一种方式/最佳实践的方式，我很高兴听到它。

谢谢。

4

1 回答 1

0

这里的答案是订阅路由器事件，如下所示：

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

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

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

于 2016-06-29T08:37:47.423 回答