TypeScript AngularJS 组件模态 - this.$modalInstance.dismiss 不是函数？

Question

我已经将我的一个用户数据输入表单变成了 uib 模态，但是当我尝试从 "cancel" 按钮关闭模态时，我得到了这个错误：this.$modalInstance.dismiss is not a function. 。同样的事情是如果使用 this.modalInstance.close(). 这很奇怪，因为 TypeScript 似乎认为这些方法应该基于 VS Code 中的代码完成。

总之，基本设置如下：

打开模式的控制器：

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

这工作正常，模式按预期打开。

这是模态实例本身：

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，否则关闭并关闭行得通，不是吗？

不太确定还能尝试什么。

Answer 1

使用$uibModal.open方法的component属性时，使用绑定而不是本地注入：

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

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

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

来自文档：

$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.

It supports these bindings:

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 Modal Directive API Reference

TypeScript AngularJS 组件模态 - this.$modalInstance.dismiss 不是函数？

TypeScript AngularJS component modal - this.$modalInstance.dismiss is not a function?

angularjs

typescript

angular-ui-bootstrap

$uibModal's open function

options parameter