【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

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

在像Angular2这样的SPA应用中使用Google Analytics的方法
Angular2のようなシングルページアプリケーションでGoogleアナリティクスを使う方法如何在像Angular2这样的SPA应用中使用Google Analytics? 试着调查了一下. 由于S ...
Cant bind to ngModel since it isnt a known property of input.ngtsc(-998002) app.component.ts(8, 7):
angular2在双向数据绑定时[(ngModel)]无法使用,出现的错误是: Cant bind to ngModel since it isnt a known property of input ...
Angular目录结构分析以及app.module.ts详解
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
一对一软件开发：在一对一社交app源码中加入这个功能，很有用...
一对一软件开发在年内倍受欢迎,随着社交app的盛行,越来越多的人愿意涉足社交行业,但传统社交平台需要大量资金支持运营,而一对一直播社交平台由于其机制限制,对带宽使用较少.对平台能承受的并发量要求低.所 ...
sdk是什么_海外APP和游戏中最常用SDK排名(截止5月17, 2020)
Appfigures提供了一个集分析.洞察和优化工具于一体的平台,帮助应用程序制造获得更多自然来源的用户.分析平台允许开发者和营销人员放大和分析所有商店和国家的下载.收入和广告活动.加上提供排名监控( ...
制作好的app需要服务器吗,在直播app制作过程中，服务器是如何配置的？
不论是一对多直播还是一对一直播app制作,关于服务器的配置和成本是大多数运营商比较关心和头疼的问题.一般来说,在直播app运营的每个阶段,所安排的服务器台数和负责的功能都是不一样的.那么如何在有限的成 ...
android 距离右边距,APP界面设计中间距与边距的要点
原标题:APP界面设计中间距与边距的要点广州UI设计别样设计表示,无论是做网页设计.后台系统设计.还是APP界面设计,都要遵守一定的设计规范,俗话说的好,无规矩不成方圆,在无需创新的情况下遵守设计规 ...
云豹短视频app源码中关于php--thinkcmf配置语言包的说明
云豹科技经常接到国外客户的单子,因此在语言模式设置上,需要实现灵活切换,以便不同语言的人员使用.云豹短视频app源码采用PHP做后台,Thinkcmf做框架,Thinkcmf本身是具有多语言模式的,默 ...

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

原来的错误写法

正确写法

1. 具名出口

2. 我的写法

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

最新文章

热门文章