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

发布时间：2020-12-17 07:28:33 所属栏目：安全来源：网络整理

导读：我正在使用角度2.0决赛.我正在尝试更改主app.component.html中路由器插座的位置.该模板正在更新精细显示,除了,我第一次使用router.navigate组件将不会显示在新的路由器插座中,并且没有错误.第二次和每次使用router.navigate后它都能正常工作. app.component.

我正在使用角度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年.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!