javascript - 在 Angular 4 的函数中打开模态对话框

Question

我有一个 Angular 4 应用程序，我想在一个函数中打开一个模态对话框。

所以，我有我的模态代码，当我点击一个按钮时我可以打开它:

<button class="btn btn-primary" id="test" (click)="open(addProjectForm)">test</button>

但我想从 component.ts 的 ngOnInit 中的函数打开模式。

那么，我怎样才能在函数内打开模式而不是使用点击选项呢？

Answer 1

Angular powered Bootstrap.可以在这里为您提供帮助。

在您的组件中，您必须导入 NgbModal并使用构造函数将其注入(inject)到您的组件中。您可以使用此服务打开模式。

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

@Component({ ... })
export class MyComponent implements OnInit {

  constructor(private modalService: NgbModal)
  { 
  }

  ngOnInit() {
  }

  public show()
  {
    this.modalService.open('text');
  }
}

这将打开一个模式，其中包含消息“文本”。但我想您可能想要添加更复杂的消息。您还可以将 HTML 放入组件的 View 中并使用它。

<ng-template #wizard>
  text
</ng-template>

接下来在您的方法中您可以添加对该模板的引用

@ViewChild('wizard')
public wizardRef: TemplateRef<any>;  

public show()
{
  this.modalService.open(this.wizardRef);
}

现在<ng-template #wizard>的内容将显示在模态内。

您可以使用 NgbModalOptions 设置更多详细信息对象，并在调用 open(ref, options) 时指定它方法。