我是Angular 4中的新手。我试图使用路由器插座创建动态内容,遗憾的是,我无法使用它两次,因为我有平板电脑,手机和台式机的不同场景。也许你们有一些建议吗?
我想我可以指定不同的网点 但也许有更简单的方法?
我的代码:
<div class="ui two column stackable grid">
<app-navigation class="three wide column computer mobile only webso-navigation"></app-navigation>
<app-navigation class="four wide column tablet only webso-navigation"></app-navigation>
<div class="thirteen wide column computer mobile only webso-content">
<router-outlet></router-outlet>
</div>
<div class="twelve wide column tablet only webso-content">
<router-outlet></router-outlet>
</div>
</div>
感谢您的帮助。
答案 0 :(得分:0)
对于您的情况,不需要两个<router-outlet></router-outlet>
您可以使用ngClass
简单地实现此目的// In Component File
isMobile : boolean;
isTablet : boolean;
// In Template File
<div [ngClass]="{'thirteen wide column computer mobile only webso-content' : isMobile ,
'twelve wide column tablet only webso-content' : isTablet }" >
<router-outlet></router-outlet>
</div>
但如果您仍想使用多个router-outlet
,
在评论中将@Skeptor建议的链接签出 http://onehungrymind.com/named-router-outlets-in-angular-2/
答案 1 :(得分:0)
解决了:
App.component.ts
export class AppComponent implements OnInit {
title = 'app';
innerWidth;
isTablet : boolean = false;
ngOnInit() {
this.innerWidth = window.innerWidth;
this.innerWidth <= 600 || this.innerWidth >= 1024 ? this.isTablet = false : this.isTablet = true;
}
@HostListener('window:resize', ['$event'])
onResize(event) {
this.innerWidth = window.innerWidth;
this.innerWidth <= 600 || this.innerWidth >= 1024 ? this.isTablet = false : this.isTablet = true;
}
App.component.html
<div [ngClass]="isTablet ? 'twelve wide column tablet only webso-content'
: 'thirteen wide column computer mobile only webso-content'">
<router-outlet></router-outlet>
</div>