如何在 Angular 8 中的页面加载时打开我的 BsModel

Question

我正在尝试在 Angular 8 项目的页面加载时打开我的 BsModel。我已经尝试了很多。但是，无法打开我的模型。这是我的代码：

HTML:

<ng-template #showPrivacyPop>
   <div class="modal-header">
       <h4 class="modal-title pull-left">Create Pluck User</h4>
       <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
           <span aria-hidden="true">&times;</span>
       </button>
   </div>
   <div class="modal-body">
       jhgjhg
   </div>
</ng-template>

还有我的 TS 文件：

import { Component, OnInit, ViewChild, TemplateRef, ElementRef, ViewRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';


@Component({
  selector: 'app-filemanager',
  templateUrl: './filemanager.component.html'

})
export class FilemanagerComponent implements OnInit {

  @ViewChild('showPrivacyPop') public privacyPopup: TemplateRef<any>;

  modalRef: BsModalRef;
  config = {
    animated: true
  };


  constructor(private modalService: BsModalService) {

  }

  ngOnInit() {
    console.log(this.privacyPopup);
  }

  openModal(template: TemplateRef<any>) {
    console.log(template);
    this.modalRef = this.modalService.show(template, this.config);
  }

}

我不知道，如何触发 HTML 在页面加载时显示。任何人请解决我的问题。

Answer 1

您可以删除 OnInit 方法。 privacyPopup 将仅在 AfterViewInit 挂钩上可用。如果它仍然给你带来麻烦，你可以把它放在一个 setTimeout 里面，延迟 0 只是为了把它扔到事件循环队列的行尾。

此外，在 angular 8 中，@ViewChild 需要一个额外的参数 ({static: boolean})。在 Angular 9 中它是可选的，因为它默认为 static: false。基本上它告诉运行time to 运行在第一个变化检测周期之后 (static: false) 或之前 (static: true) 的查询。通常，您会希望它是 false，除非查询具有任何仅在更改检测运行s.

之后才能解析的依赖项

export class FilemanagerComponent implements AfterViewInit {

@ViewChild('showPrivacyPop', {static: false}) 
public privacyPopup: TemplateRef<any>;

...

ngAfterViewInit() {
  this.openModal(this.privacyPopup);
}

如何在 Angular 8 中的页面加载时打开我的 BsModel

How do I open my BsModel on page load in Angular 8

html

bootstrap-modal

angular