TypeScript AngularJS组件模态-this.$ modalInstance.dismiss不是函数吗? [英] TypeScript AngularJS component modal - this.$modalInstance.dismiss is not a function?

问题描述

我已经将一种用户数据输入表单转换为uib模态，但是当我尝试从取消"按钮关闭模态时，出现此错误:this.$modalInstance.dismiss is not a function..如果使用this.modalInstance.close().也是一样，这很奇怪，因为TypeScript似乎认为这些方法应该基于VS Code中的代码完成而存在.

I've turned one of my user data entry forms into a uib-modal, but I get when I attempt to close the modal from the "cancel"button, I get this error: this.$modalInstance.dismiss is not a function. . Same thing is if use this.modalInstance.close(). Which is weird because TypeScript seems to think those methods should be there based on the code completion in VS Code.

无论如何，基本设置如下:

Anyway, the basic set up is as follows:

打开模态的控制器:

class TestModalController {

    static $inject = ['$modal'];
    options: ng.ui.bootstrap.IModalSettings;
    myModal? : ng.ui.bootstrap.IModalInstanceService;

    constructor(private $modal: ng.ui.bootstrap.IModalService) {

        this.options = {
            animation: true,
            component: 'fringeEdit',
            windowClass: 'fringe-edit',
            resolve: {}
        }
    }

    openFringeEdit() {
        this.myModal = this.$modal.open(this.options);
    }
}

这很好，模式将按预期方式打开.

This works fine, the modal opens as expected.

这是模式实例本身:

class FringeEditController {

    static $inject =['$uibModalInstance']
    constructor(private $uibModalInstance: ng.ui.bootstrap.IModalInstanceService) {

    }

    dismiss() {
      this.$uibModalInstance.close("closed");  //This throws error whether using dismiss or close
    }

}

注册代码:

app.controller("FringeEditController",['$uibModalInstance', FringeEditController]);
app.controller("TestModalController", ['$uibModal', TestModalController]);

app.component("fringeEdit", {
    controller: "FringeEditController",
    templateUrl: "/template/fringeEditTemplate.html",
    bindings: {}
}); 

我从这里的各个帖子中尝试了一些调整，但是我一直收到此错误，这使我相信，由于$ uibModalInstance实际不是$ uibModalInstance传入的任何内容，否则close和dismiss会起作用，不是吗?

I've tried several tweaks from various posts here, but I keep getting this error, which leads me to believe that whatever is being passed in as as $uibModalInstance isn't actually a $uibModalInstance, otherwise close and dismiss would work, wouldn't it?

不太确定还有什么尝试.

Not really sure what else to try.

推荐答案

使用$uibModal.open方法的component属性时，请使用绑定而不是局部注入:

When using the component property of the $uibModal.open method, use bindings instead of local injection:

app.component("fringeEdit", {
    controller: "FringeEditController",
    templateUrl: "/template/fringeEditTemplate.html",
    bindings: { close: "&" }
}); 

然后在控制器中使用绑定:

Then use the bindings in the controller:

dismiss() {
  this.close({$value: "closed"});
}

从文档中:

$ uibModal的打开功能

选项参数

• component (Type: string, Example: myComponent)-对要渲染的组件的字符串引用，该组件已在Angular的编译器中注册.如果使用指令，则该指令必须具有限制:"E"并设置了template或templateUrl.

$uibModal's open function

options parameter

• component (Type: string, Example: myComponent) - A string reference to the component to be rendered that is registered with Angular's compiler. If using a directive, the directive must have restrict: 'E' and a template or templateUrl set.

它支持以下绑定:

• close-一种可用于关闭模式并传递结果的方法.结果必须以以下格式传递:{$value: myResult}

• close - A method that can be used to close a modal, passing a result. The result must be passed in this format: {$value: myResult}

有关更多信息，请参见

• UI-Bootstrap模态指令API参考

这篇关于TypeScript AngularJS组件模态-this.$ modalInstance.dismiss不是函数吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！