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

问题描述

我已将我的一个用户数据输入表单转换为 uib 模式，但是当我尝试从取消"按钮关闭模式时，我收到此错误:this.$modalInstance.解除不是一个函数..同样的事情是如果使用 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，否则关闭和关闭会起作用，不是吗?

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"});
}

来自文档:

• component (Type: string, Example: myComponent) - 对要渲染的组件的字符串引用，在 Angular 的编译器中注册.如果使用指令，该指令必须有restrict: 'E' 和模板或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屋！