Question

我正在使用angular2 rc1。我正在开发一个以菜单屏幕开头的简单游戏，当点击菜单按钮时，我想导航到另一个视图，替换当前视图。然后我想用后退按钮导航回来。

这是一个看似简单的要求，但是，我看到所有路由样本都使用路由器插座追加到当前视图而不是替换它。 e.g。

<h1>Component Router</h1>
 <nav>
  <a [routerLink]="['/crisis-center']">Crisis Center</a>
  <a [routerLink]="['/heroes']">Heroes</a>
 </nav>
<router-outlet></router-outlet>

此标记会在</nav>元素下附加新视图。

我错过了一些明显的东西吗？有没有一种简单的方法可以执行此操作，还是需要将<router-outlet>与*ngIf结合使用来隐藏当前视图？

Answer 1

我正在寻找类似的东西（如果我理解你的问题）。我的方法（目前）是将路由器插座包装在div中，并在内容加载时更改该元素的样式（切换一个类会明显更好）。

<nav>
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/search">Search</a>
</nav>

<div class="loading-overlay" *ngIf="loading">Cargando...</div>

<div [style.display]="loading ? 'none' : 'block'">
  <router-outlet></router-outlet>
</div>

在app.component中我有这段代码（@borislemke中的this response）：

public loading: boolean = true;

constructor(private router: Router) { }

ngOnInit() {
  this.router.events.subscribe((event: any): void => {
    this.navigationInterceptor(event);
  });
}

navigationInterceptor(event): void {
  if(event instanceof NavigationStart) {
    this.loading = true;
  }
  if(event instanceof NavigationEnd) {
    this.loading = false;
  }
}

Answer 2

我认为还有其他办法，你需要使用 * ngIf 。

您尝试实现的不是常见模式（正常模式是具有导航菜单和内容菜单），但它可能对您说的游戏有意义。

Angular2：路由到其他视图时隐藏当前视图

2 个答案: