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

Question

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

这是一个看似简单的要求，但是，我看到的所有路由示例都使用路由器出口 append 到当前视图而不是替换它。例如

<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

我认为没有其他方法可以做到这一点，您需要使用 *ngIf.

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

Answer 2

我正在寻找类似的东西（如果我正确理解你的问题）。我的方法（目前）是将路由器出口包装在 div 内，并在加载内容时更改该元素的样式（切换 class 显然会好得多）。

<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 in ）：

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

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

Angular2: Hide current view when routing to other view

angular

angular2-routing