Angular 2 弹出表单点击

Question

我需要在 angular 2 中单击弹出屏幕。弹出屏幕将包含不同的选项卡和表单我尝试使用 angular2-modal 但它只有提示提醒但不确定是否支持自定义表单创建。

如果angular2-model 支持自定义表单怎么办有没有其他包支持完成我的任务。

我的代码：

***users.component.html*** 

<input type="checkbox" name="scheduler2" (click)="helpWindow($event)"> 


***users.component.ts***

 helpWindow(event) {
    this.modal.alert()
        .size('lg')
        .isBlocking(true)
        .keyboard(27)
        .showClose(true)
        .title('A simple Alert style modal window')
        .body(`
            <h4>Alert is a classic (title/body/footer) 1 button modal window that 
            does not block.</h4>
            <b>Configuration:</b>
            <ul>
                <input type="text" name="text" />
            </ul>`)
        .open();
  }

Answer 1

这是angular2-modal打开函数：

  /**
   * Opens a modal window inside an existing component.
   * @param content The content to display, either string, template ref 
 or a component.
  * @param config Additional settings.
  * @returns {Promise<DialogRef>}
   */
   open(content: ContainerContent, config?: OverlayConfig): 
     Promise<DialogRef<any>> {... }

如您所见，您可以提供对模板或自定义模态组件的引用。有关详细信息，请参阅 bootstrap-demo-page。

Answer 2

你可以使用 angular2 material。它提供了一个很好的对话框，您可以在其中注入任何组件，该组件将显示在该模型中。它还具有许多不错的功能，例如 afterClose(subscriber)。您可以将数据传递给它的子组件。

Angular 2 弹出表单点击

Angular 2 popup form on-click

angular2-forms

angular2-template

angular