Angular 4 个路由器插座

Question

我是新手 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>

感谢您的帮助。

Answer 1

对于你的情况，不需要两个<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 在评论中的建议检查 link http://onehungrymind.com/named-router-outlets-in-angular-2/

Answer 2

已解决：

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>

Angular 4 个路由器插座

Angular 4 router-outlets

angular

router

outlet

angular4-router