无法动态重新加载组件

Question

我正在尝试根据屏幕分辨率动态加载标签组件。我有一个带有值的可观察服务：xl，md，sm，xs。组件最初加载到xs上，然后在屏幕上卸载调整大小。问题是当您将屏幕调整回到768（xs）以下时，组件未完全实现。我可以看到组件在第二次加载时被注入到DOM中，但看起来没有呈现指令。

Plnkr - 尝试调整显示器的全宽，然后调整回最小尺寸以重新加载标签组件

＆＃13;

＆＃13;

import {Component, bootstrap, DynamicComponentLoader, ElementRef, ComponentRef} from 'angular2/core'
import {UiTabs, UiPane} from './ui_tabs'
import {TabbedLayout} from './tabbed_layout'
import {ResizeSvc} from './resize_svc';  

@Component({
  selector: 'my-app',
    template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div #location></div>
    </div>
  `,
  providers: [ResizeSvc]
})
export class App implements OnInit{
  private resizeSvc: ResizeSvc;
  private _children:ComponentRef;
  
  constructor(private _dcl: DynamicComponentLoader, private _e: ElementRef, pResizeSvc:ResizeSvc) {
    this.name = 'Angular2'
    this.resizeSvc = pResizeSvc;
  }
  
  ngOnInit() {
    console.log('initialized app.ts');
     
    this.resizeSvc.layout$.subscribe(
        value => this.setLayout(value)
    );
  }
  
  setLayout(pSize:string) {
    this.removeAll();
    
    if(pSize === 'xs') {
      console.log('loading layout ' + pSize);
      //this._dcl.loadIntoLocation(TabbedLayout, this._e, 'location').then((ref) => {
      this._dcl.loadNextToLocation(TabbedLayout, this._e).then((ref) => {
      ref.instance._ref = ref;
      this._children = ref;
    });
    } else {
      
    }
  }
  
  removeAll() {
    if(this._children != null) {
      console.log('Disposing layout...');
      this._children.dispose();
      this._children = null;
    }
  }
}

＆＃13;

＆＃13;

＆＃13;

这是最初加载时DOM的图片

这是第二次加载时缺少制表符的DOM图片

Answer 1

<script>进口的顺序很重要。 angular2-polyfills.js必须在system-polyfills.js之后。 Here is your plunker working

我刚将下面的导入移到了列表的顶部。

<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>