【Angular】在angular2的app.component.html中使用 *ngIf 更改路由出口router-outlet

实际项目中使用到，在此记录
一个正常的pc端需要兼容大屏，之前已经写过如何做兼容—> 【CSS】网页如何快速适应大屏显示，快速自适应，旧版网站改造，
这次是对路由相关问题做了些优化:

原来的错误写法

代码简写如下

<div *ngIf="flag===true">
  <h1>大屏</h1>
  <router-outlet></router-outlet>
</div>
<div *ngIf="flag===false">
  <h1>正常</h1>
  <router-outlet></router-outlet>
</div>

如果使用*ngIf有条件地禁用和启用router-outlet。
当一个router-outlet会被注册，无论你做什么，下一个router-outlet都不会响应router的变化。

此时应该使用具名的路由出口，或者只使用一个路由出口。

正确写法

1. 具名出口

<div *ngIf="flag===true">
<h1>大屏</h1>
 <router-outlet name="big">
 </router-outlet>
</div>
<div *ngIf="flag===false">
 <h1>正常</h1>
 <router-outlet name="normal">
 </router-outlet>
</div>

路由器将如下所示：

{ path: 'page1', component: Page1Component, outlet: 'big' },
{ path: 'page2', component: Page2Component, outlet: 'normal' }

2. 我的写法

<!--大屏出口-->
<div class="desktop-container-green" *ngIf="flag">
    <div class="desktop-header">
      <div class="left">
        <ng-container *ngFor="let nav of sysNavs, let i = index;">
          <div [ngClass]="['navitem',i === selectedClass ? 'selectedClass' : 'noClass']"
            *ngIf="i < 2"
            (click)="specifySys(nav);selected(nav,i)">
              {{nav.data.sysName}}
          </div>
        </ng-container>
      </div>

      <div class="center-logo">
        <div class="center-one"></div>
        <div class="center-two"></div>
      </div>

      <div class="right">
        <ng-container *ngFor="let nav of sysNavs, let i = index;">
          <div [ngClass]="['navitem',i === selectedClass ? 'selectedClass' : 'noClass']"
            *ngIf="i > 1"
            (click)="specifySys(nav);selected(nav,i)">
              {{nav.data.sysName}}
          </div>
        </ng-container>
      </div>
      <img src="../assets/images/desktop/big/green/top_btn.png"
          alt="返回" class="back-img"
          width="100"
          (click)="goBack()">
    </div>

    <div class="desktop-content">
        <ng-container *ngTemplateOutlet="template"></ng-container>
    </div>
</div>


<!--正常出口-->
<div class="logedout-route" *ngIf="!flag">
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>


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

参考文章：https://stackoverflow.com/questions/40077355/changing-router-outlet-with-ngif-in-app-component-html-in-angular2