1
画面の解像度に基づいてタブコンポーネントを動的に読み込もうとしています。私はxl、md、sm、xsという値を持つ観測値を持つサービスを持っています。コンポーネントは最初にxsにロードされ、画面のサイズ変更時にアンロードされます。問題は、コンポーネントが完全にマテリアライズされていない768（xs）より下に画面のサイズを戻すときです。コンポーネントが2番目の負荷でDOMに注入されているのがわかりますが、指示がレンダリングされていないようです。コンポーネントを動的に再読み込みできません
Plnkr - 最初に 
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;
}
}
}をリロードするために戻って最小サイズにリサイズした後、表示全幅サイジング試しはDOMの写真です
次に、タブがない2番目の負荷のDOMの画像 
あなたのCSSがこの問題を処理しない理由はありますか？ – Brad
Brad、私は、より大きな解像度のためのカードレイアウトと電話機のためのタブ付きレイアウトの間の切り替えに興味があります。各タブには、動的にロードされる単一のカードが含まれます。私は単純にカードを垂直に積み重ねることには興味がありません。最終的には、「カード」はリソースを大量に消費することになります。したがって、単純に非表示にすることは最適ではありません。このレイアウト要件のためのシンプルなCSSソリューションがあれば、私は耳を傾けています。それが助けになると、各カードはcreatejsを使ってアニメーションを持っています。私は隠されたカード、またはスクリーンカードからアニメーション化することを忘れないであろう。 –