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

时间:2016-10-17 01:37:11

标签: angular angular2-routing angular2-template

我正在使用角度2.0决赛。我正在尝试更改主app.component.html中 router-outlet 的位置。模板正在更新精细显示,除了我第一次使用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>

6 个答案:

答案 0 :(得分:11)

我想说的是,请使用命名为router-outlet的名称,该名称可以很好地工作,但是对我来说,问题是这样的网址根本对用户不友好,我个人认为带有出口名称的网址没有意义,

例如:-

路线

{ path : "forgotPassword", component :ForgotPassword , outlet : "notlogedin" }

在浏览器地址栏中的输出

http://localhost:4200/(notlogedin:forgotPassword)

查看它在地址栏中的外观多么愚蠢。

因此,如果您尝试使用*ngIf有条件地禁用和启用router-outlet来解决该问题,则它将不起作用。一个router-outlet将被注册,无论您做什么,下一个router-outlet都不会响应路线更改。

这就是解决方案

使用ngTemplateOutletng-template,可以通过仅保留一个router-outlet来解决此问题,请参见下面的示例代码。

<ul>
  <li><a routerLink="/login">login</a></li>
  <li><a routerLink="/dashboard">dashboard</a></li>
</ul>

<!--This is where my before login router stays-->
<div class="logedIn-route" *ngIf="routerActive">
<ng-container *ngTemplateOutlet="template"></ng-container>
</div>

<!--This is where my after login router stays-->
<div class="logedout-route" *ngIf="!routerActive">
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>


<ng-template #template>
  <router-outlet>
  </router-outlet>
</ng-template>

尝试小提琴

https://jsfiddle.net/imal/e4tyqv95/36/

答案 1 :(得分:5)

您应该考虑使用已命名的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

答案 2 :(得分:0)

我必须使用ViewContainerRef,以便移动设备和桌面设备都能使用相同的路由器插座:

<!-- MOBILE -->
<div *ngIf="isMobile">
  <div #mobileOutlet></div>
</div>

<!-- DESKTOP -->
<div *ngIf="!isMobile">
  <div #desktopOutlet></div>
</div>

<ng-template #tpl>
  <router-outlet></router-outlet> 
</ng-template>

我使用createEmbeddedView对两者都没有问题:

@ViewChild('mobileOutlet', { read: ViewContainerRef }) _vcrMobile;
@ViewChild('desktopOutlet', { read: ViewContainerRef }) _vcrDesktop;
@ViewChild('tpl') tpl;

ngAfterViewInit() {
  if (this.isMobile) this._vcrDesktop.createEmbeddedView(this.tpl);
  else this._vcrMobile.createEmbeddedView(this.tpl);
}

唯一的问题是,如果在断点之间切换,则必须切换此插座。例如,从桌面到移动设备调整大小:

this._vcrDesktop.clear();
this._vcrMobile.createEmbeddedView(this.tpl)

答案 3 :(得分:0)

这样的用户路由,将解决命名插座的问题

{
    path: 'login',
    children: [
      {
        path: '',
        component: LoginComponent,
        outlet: 'loutlet',
      }
    ]
  },
  {
    path: 'profile',
    component: ProfileComponent,
  }

答案 4 :(得分:0)

You can not use multiple router outlets in the same template with ngIf condition. But you can use it in the way shown below:

<div *ngIf="loading">
  <span>loading true</span>
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>

<div *ngIf="!loading">
  <span>loading false</span>
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>



<ng-template #template>
  <router-outlet> </router-outlet>
</ng-template>

答案 5 :(得分:0)

我遇到了同样的问题,其中我的 app.component.html 中有多个 <router-outlet>,并希望它们在 *ngIf 中/可见。我已经尝试了几乎所有我可以在网上找到的东西(有些工作但打破了角度 SPA 的原则)。

这对我来说完全有效,我认为这是最合乎逻辑和非常简单的解决方案。

<div *ngIf="authenticated">
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>

<div *ngIf="!authenticated">
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>

<ng-template #template>
  <router-outlet></router-outlet>
</ng-template>