代码之家 › 专栏 › 技术社区 › Shan-Desai askovpen

无需按钮,通过函数调用触发NgbModal

ng-bootstrap typescript angular

Shan-Desai askovpen · 技术社区 · 7 年前

中的所有示例 Angular Bootstrap's Modals 有一个外部按钮来触发模式本身。

在我的例子中,我使用的是一个图表,它有一个函数 nodeClicked(event, node) .

在函数中,我检查用户是否按下 CTRL键 按钮,同时单击节点。如果没有,我需要触发一个模式,说明没有单击按钮。

组成部分html

<ng-template #content let-c="close" let-d="dismiss">
    <div class="modal-header">
        <h4 class="modal-title">Warning</h4>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <p>NO <kbd>CTRL</kbd> Button Pressed.</p>
        <p>If previous Selection were selected using Multiselect Feature, they will be deleted.</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
    </div>
</ng-template>

在 nodeClicked() 功能:

组成部分ts

constructor (modal: NgbModal) {}
....
nodeClicked(ev, node) {

if (ev.control) {
  //perform necessary stuff
}
else {
  this.modal.open() // here according to API I need to pass content.
  // but I already have mentioned that in `modal-body`
}

}

如何在不实际通过 content 中的字符串 this.model.open() 方法调用?

1 回复 | 直到 7 年前

ConnorsFan 6 年前

您可以使用获取对模式模板的引用 @ViewChild("content") ,并将其传递给 NgbModal.open . 例如, this plunker 5秒后自动显示模式。

import { Component, ViewChild, TemplateRef } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

export class MyComponent {

  @ViewChild("content") modalContent: TemplateRef<any>;

  constructor(private modal: NgbModal) {
  }

  nodeClicked(ev, node) {
    if (ev.control) {
      //perform necessary stuff
    }
    else {
      this.modal.open(this.modalContent).result.then((result) => {
        ...
      });
    }
  }
}

推荐文章

user3587624 · 禁用FluentUI React组件上的onClick事件

1 年前

Devmix · 如何在new Map()中保存状态?

1 年前

programmerGuy · 使用useState时获取不可分配给参数的接口

1 年前

Luisus · 从Prisma 5客户端提取类型

1 年前

Rostys · TypeScript:使用类型转换进行类型保护

1 年前

Raffaele · TS2304:当types.d.ts导出某些内容时,找不到名称ENDPOINT

1 年前

Anne · 类型不一致的对象的TypeScript类型定义

1 年前

tuimui · 使用react+ts通过道具传递数据

1 年前

FJ97 · 错误NullInjectorError:R3InjectorError(AppModule)[MatDialogConfig->MatDialogConfig]:

1 年前

Pooria Sadeghy · Vitest-类型错误:_ctx$t不是函数

1 年前