在Tutorial Angular示例中,使用"布线"来选择和控制Angular 视图零部件。
我知道我们可以使用 * 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有什么好处?
1条答案
按热度按时间nbnkbykc1#
主要优点是浏览器URL栏反映了状态。
当用户创建书签并返回时,她将获得相同的视图,而使用
*ngIf
时,初始视图将始终相同。使用路由器的一个缺点是,没有绑定像
<my-component [foo]="xxx" (bar)="doSomething()"
是不可能的与路由器添加的组件。对于这种类型的通信通常使用共享服务。