Angular 使用Route代替*ngIf控制角度视图组件的优势？

在本例中，它用于选择和控制角度视图组件

我知道我们可以使用*ngIf指令选择一个视图。这样，我觉得更可读

参见示例：

路线（如教程）

模板：“”
{{title}}
仪表板
英雄
''',
...
@路由图（常数）[
常量重定向（路径：'/'，重定向到：常量['Dashboard']），
常量路线(
路径：'/dashboard'，
名称：“仪表板”，
组件：仪表板组件，
),
常量路线(
路径：'/detail/：id'，
名称：“HeroDetail”，
组件：HeroDetailComponent，
),
常量路由（路径：'/HERONES'，名称：'HERONES'，组件：HeroesComponent）
])

*ngIf（替代路线）

模板：“”
{{title}}
仪表板
英雄
'''
...
类AppComponent{
国际妇女组织；
无效选项菜单（int i）{
oMenu=i；
}
}

---

使用角度路由策略替代*ngIf有哪些优点？

主要优点是浏览器URL栏反映状态

当用户创建书签并返回时，将获得相同的视图，而使用

*ngIf

，初始视图将始终相同

使用路由器的一个缺点是，没有像

template: '''
<h1>{{title}}</h1>
<nav>
  <a [routerLink]="['Dashboard']">Dashboard</a>
  <a [routerLink]="['Heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
''',

...

@RouteConfig(const [
  const Redirect(path: '/', redirectTo: const ['Dashboard']),
  const Route(
    path: '/dashboard',
    name: 'Dashboard',
    component: DashboardComponent,
  ),
  const Route(
    path: '/detail/:id',
    name: 'HeroDetail',
    component: HeroDetailComponent,
  ),
  const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)
])

template: '''
  <h1>{{title}}</h1>
  <nav>
    <button on-click="optionMenu(1)">Dashboard</button>
    <button on-click="optionMenu(2)">Heroes</button>
  </nav>
  <div *ngIf="oMenu == 1">
    <my-dashboard></my-dashboard>
  </div>
  <div *ngIf="oMenu == 2">
    <my-heroes></my-heroes>
  </div>    
  '''
  ...

class AppComponent {   
  int oMenu;

  void optionMenu(int i) {
    oMenu = i;
  }
}