1
Я пытаюсь динамически загружать компонент вкладки на основе разрешения экрана. У меня есть служба с наблюдаемым со значениями: xl, md, sm, xs. Компонент первоначально загружается на xs, а затем выгружает на экране изменения размера. Проблема заключается в том, что при изменении размера экрана до 768 (xs) компонент не полностью материализован. Я вижу, что компонент вводится в 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, когда первоначально загружен 
И вот изображение DOM на второй нагрузке с отсутствующими вкладками 
Есть ли причина, по которой вы не позволяете своим CSS заботиться об этом? – Brad
Брэд, меня интересует переход между макетом карты для больших разрешений и планками для телефонов. Каждая вкладка будет содержать динамическую загрузку одной карты. Меня не интересует просто складывание карт по вертикали. В конечном счете, «карты» будут ресурсоемкими; поэтому не просто просто скрыть их. Я все уши, если для этого требования макета есть простое решение CSS. Если это помогает, на каждой карте есть анимация с использованием createjs. Я бы не скрывал карты, или с экранных карт, анимируя. –