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

Question

在 Tutorial Angular 示例中，它用于路由到 select 并控制 Angular 视图组件。

我知道我们可以对 select 视图使用 *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)
])

*ngIf（路由的替代）

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

使用 Angular 路由策略代替 *ngIf 有什么优势？

Answer 1

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

当用户创建书签并返回时，她将获得相同的视图，而使用 *ngIf，初始视图将始终相同。

使用路由器的一个缺点是，像 <my-component [foo]="xxx" (bar)="doSomething()" 这样的绑定无法通过路由器添加的组件实现。对于这种通信，通常使用共享服务。

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

Advantage to use Route instead *ngIf to control Angular View Component?

angular

angular-ui-router

dart

angular-dart