NG-STYLE的双向绑定不能在角度模式下工作

Question

我试图在10秒后显示弹出窗口。我正在从另一个组件重置变量。当我运行该应用程序时，它正确地调用了show函数。

但是在我的ng风格条件下，不会从不显示变为弯曲。

我在此处附加了我的代码，请参考。预先感谢。

Component1.ts

import { ReconnectModalComponent } from './shared/components/reconnect-modal/reconnect-modal.component';

@Component({
  providers:[ReconnectModalComponent],
  moduleId: module.id,
  selector: 'sd-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
})

constructor(private reconnectComp: ReconnectModalComponent ) { 
}

ngOnInit() {
    this.sessionService.isSessionAlive().subscribe((result: any) => {
      try {
        this.reconnectComp.show()
      } catch (ex) {
        console.log(JSON.stringify(ex));
      }
    })
}

Component2.ts

import {
  Component,
  ViewChild,
  ElementRef
} from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'reconnect-modal',
  templateUrl: 'reconnect-modal.component.html',
  styles: [`
    .modal {
      background: rgba(0,0,0,0.6);
      display: flex;
      align-items: center;
    }
    .modal-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-radius: 0;
      padding: 40px;
    }
    .modal-header {
      font-weight: bold;
    }
    .modal-header,
    .modal-body,
    .modal-footer {
      border: 0;
      padding: 0;
    }
    .modal-body {
      font: 18px/23px "DinProRegular", sans-serif;
      margin-bottom: 40px;
    }
    .modal-body,
    .modal-footer {
      text-align: center;
    }
  `]
})
export class ReconnectModalComponent {
  @ViewChild('content') modal: ElementRef;
  public visible = true;
  private visibleAnimate = true;

  constructor() {}

  public show(): void {
    this.visible = true;
    setTimeout(() => this.visibleAnimate = true, 100);
  }

  public hide(): void {
    this.visibleAnimate = false;
    setTimeout(() => this.visible = false, 300);
  }

  public onContainerClicked(event: MouseEvent): void {
    if ((<HTMLElement>event.target).classList.contains('modal')) {
      this.hide();
    }
  }

}

Componnet.html

  <div (click)="onContainerClicked($event)" class="malaii modal fade" tabindex="-1" 
  [ngClass]="{'in': visibleAnimate}"
  [ngStyle]="{
    'display': visible ? 'flex' : 'none', 
    'opacity': visibleAnimate ? 1 : 0,
    'z-index': visible ? 1050 : 0
  }">
  <div class="modal-dialog">
    {{visible}}
    <div class="modal-content">
      <div class="modal-header">
        <ng-content select=".header"></ng-content>
      </div>
      <div class="modal-body">
        <ng-content select=".body"></ng-content>
      </div>
      <div class="modal-footer">
        <ng-content select=".footer"></ng-content>
      </div>
    </div>
  </div>
</div>