Question

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

所以，当我点击按钮时，我可以打开我的模态代码：

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

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

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

Answer 1

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

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

1 个答案: