在Angular 4中的一个函数中打开模态对话框

Question

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

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

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

但是我希望在组件.ts的ngOnInit函数中从一个函数打开模态框。

那么，如何在函数内打开模态框而不需要单击选项？

- Adrien

---

只需在 ngOnInit 中调用 open(addProjectForm) 即可。 - Fahad Nisar

但是带有open(addProjectForm)的按钮位于 modal.component.html 中，我想在另一个组件timeline.component.ts中调用它。因此，该名称无法找到。 - Adrien

所以基本上你想说的是，你想从另一个组件中调用定义的函数，对吗？ - Fahad Nisar

是的，我想在另一个组件中调用模态框的打开。 - Adrien

请查看此答案。 - Aravind

实际上，你使用哪种图形库确实很重要。是Bootstrap还是Angular Material？如果是Angular，你使用“Angular Powered Bootstrap”还是“ngx-bootstrap”？ - bvdb

Answer 1

Angular 动力的 Bootstrap. 可以在这里帮助你。

在你的组件中，你需要导入 NgbModal 并在构造函数中注入它。你可以使用这个服务来打开模态框。

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

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

  constructor(private modalService: NgbModal)
  { 
  }

  ngOnInit() {
  }

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

这将打开一个模态框，显示消息 "text"。但我猜你可能想添加一个更复杂的消息。你也可以在组件的视图中放置HTML，并使用它。

<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)方法时指定它。

- bvdb