在angular2中使用app.component.html中的* ngIf更改路由器插座

前端之家收集整理的这篇文章主要介绍了在angular2中使用app.component.html中的* ngIf更改路由器插座前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用角度2.0决赛.我正在尝试更改主app.component.html中路由器插座的位置.该模板正在更新精细显示,除了,我第一次使用router.navigate组件将不会显示在新的路由器插座中,并且没有错误.第二次和每次使用router.navigate后它都能正常工作.

app.component.html的示例模板

<div *ngIf="authenticated() == false">
      <h1>not logged in</h1>
      <router-outlet>
      </router-outlet>
    </div>
    <div *ngIf="authenticated()">
      <h1>logged in</h1>
      <router-outlet>
      </router-outlet>
    </div>
你应该考虑使用命名的router-outlet.

它在文档中说明:模板可能只包含一个未命名的模板.

<div *ngIf="authenticated() == false">
      <h1>not logged in</h1>
      <router-outlet name="notloggedin">
      </router-outlet>
    </div>
    <div *ngIf="authenticated()">
      <h1>logged in</h1>
      <router-outlet name="loggedin">
      </router-outlet>
    </div>

路由器看起来像:

{ path: 'page1',component: Page1Component,outlet: 'notloggedin' },{ path: 'page2',component: Page2Component,outlet: 'loggedin' }

这里an example来自@yurzui,于this post年.

原文链接:https://www.f2er.com/angularjs/142105.html

猜你在找的Angularjs相关文章