Question

我有一个用ng-template包装的模式，

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal for user id : {{ modalService.config.initialState.id }}</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">
    This is a modal.
  </div>
</ng-template>

我有一个按钮可以像这样打开模式

 <button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>


openModal(template: TemplateRef<any>) {
    const user = {
        id: 10
      };
    this.modalRef = this.modalService.show(template, {
      initialState : user
    });
  }

这将在我将模板作为参数传递时起作用。

如何在不传递参数的情况下打开此模态？让它成为我没有按钮，我想在ngOninit上打开模态。怎么可能？

stackblits

Answer 1

使用@ViewChild()装饰器在打字稿中获取模板的引用，并使用ngAfterViewInit()钩子打开模态。

@ViewChild('template') templateRef: TemplateRef<any>;


ngAfterViewInit() {
  const user = {
      id: 10
    };
  this.modalRef = this.modalService.show(this.templateRef, {
    initialState : user
  });
}

https://stackblitz.com/edit/angular-modal-bootstap-pay2ua?file=app%2Fapp.component.ts

修改

我刚刚注意到，如果我们在ExpressionChangedAfterItHasBeenCheckedError钩子中显示它，我们将得到一个ngAfterViewInit()，以解决在setTimeuut()

中打开模式的问题。

  setTimeout(() => {
    this.modalRef = this.modalService.show(this.templateRef, {
      initialState : user
   })
  })

https://stackblitz.com/edit/angular-modal-bootstap-pr377t?file=app/app.component.ts

Answer 2

有一个非常简单的方法可以在 angular 中打开 <ng-template> </ng-template> modal。

可以使用modalService打开modal，在.ts-file中添加如下内容。

第 1 步：import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

第 2 步：constructor(private modalService: NgbModal)

第 3 步：

function openModal(template) {
             this.modalService.open(template);
         }

当按钮被按下时，函数 openModal() 将被触发并且“模板”参数将作为参数传递。这反过来将触发 modalService 并打开模态“模板”。

Answer 3

您可以使用ViewChild装饰器来获取引用并首先使用AfterViewInit钩子进行加载，该钩子是在Angular完全初始化组件的视图之后调用的。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit, AfterViewInit  {


  ngAfterViewInit() {
    const user = {
        id: 10
      };
      this.modalRef = this.modalService.show(this.template, {
      initialState : user
    });
  }

}

Demo

Answer 4

在 Angular 中是组件中 ng-template 模态的简单方法

喜欢下面

导入 NgbModal :

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

export class YourComponent implements OnInit {
constructor(
  private modalService: NgbModal
 ) {}

 ngOnInit(): void {
   this.openModal('template');
 }

openModal(template) {
 this.modalService.open(template);
}
}

如何从组件中打开ng-template模态？

4 个答案: