Динамически настраивайте панель приложения CoreUI - PullRequest
Новая
       18

Динамически настраивайте панель приложения CoreUI

0 голосов
/ 21 апреля 2020

У меня есть это в моем макете: 

<app-aside [fixed]="true" [display]="false" [ngClass]="'test'">
    <ng-template style="border: solid 2px;" #container></ng-template>
</app-aside>

И с помощью этого метода я могу добавить компонент в #container

//in DefaultLayoutComponent.ts

@ViewChild("container", { read: ViewContainerRef }) container;
componentRef: ComponentRef<any>;

this.defaultLayoutService.e_openAppAside.subscribe(c => {
  const factory = this.resolver.resolveComponentFactory(c);
  this.container = this.container.createComponent(factory);
});

Затем в служба, используемая для управления макетом 

showAppSideCollapsed(show: boolean, width: number) {
    const body = document.getElementsByTagName('body')[0];
    if (show) {
      body.classList.add('aside-menu-lg-show');
      this.style = { 'width' : `${width}px !important;` }; //this isn't working...
    }
    else {
      body.classList.remove('aside-menu-lg-show');
    }
}

setAppAsideComponent(type: any, width: number): void {
    this.e_openAppAside.emit(type);
    this.showAppSideCollapsed(true, width);
}

Мой другой компонент может вызывать службу и вставлять компонент в боковую панель приложения 

this.defaultLayoutService.setAppAsideComponent(SpaceFormComponent, 550);

Это позволяет внедрить правильный компонент в приложение в сторону полосы, вправо

enter image description here

Но проблема в том, что настройка ширины не работает. Я думаю, это потому, что к тому времени, когда я устанавливаю стиль, анимация расширения не выполняется, и когда это происходит, применяются стили по умолчанию.

Есть ли способ подключиться к событию, чтобы сделать это вместо этого?

...