Question

我正在尝试使用打字稿和角色来使用$ uibModal来显示模态。

    export class PDPController{

    static $inject = ['pdpService', '$sce', 'angularLoad', '$uibModalInstance'];
    constructor(
        pdpService: PDPService, 
        $sce : ng.ISCEService, 
        angularLoad,
        //initiating in constructor
        private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance
    ) {
        this.pdpService=pdpService;
        //Need to add promise
        pdpService.getContentdata(APP_CONSTANT.API_URL_LEARN_MORE)
            .then((authorContentData) => {
            this.contentData= authorContentData;
            pdpService.getPDPdata(APP_CONSTANT.API_URL_LEARN_MORE)
            .then((pdpData) => {
            console.log(pdpData);
            this.setProductDetails(pdpData);
        });
        });

    }
    //method to invoke the modal
    private showPromo(): void{

        console.log("Promo");
          var modalInstance = this.$uibModal.open({
              animation: "true",
              templateUrl: 'promoModalContent.html',
              appendTo: 'body'
            });
    }
}

//module:
let module: ng.IModule = angular.module(pdpModule, ['ui.bootstrap']);

当我运行Gulp Build时，我正面临这个错误：

Unknown provider: $uibModalInstanceProvider <- $uibModalInstance
Module 'angular.ui' has no exported member 'bootstrap'.

运行代码时无法识别

$ uibModal：错误：'PDPController'类型中不存在属性'$ uibModal'。

我对Typescript完全不熟悉，也无法找到解决方法。请指导。

Answer 1

我可以解决这个问题......但是真的不知道这是怎么回事！编辑我做了：

export class PDPController {
    public $uibModal: ng.ui.bootstrap.IModalService;
    public modal: any;

    //injected $uibModal
    static $inject = ['pdpService', '$sce', 'angularLoad', '$uibModal'];
    //initiated $uibModal
    constructor(
        pdpService: PDPService,
        $sce: ng.ISCEService,
        angularLoad,
        $uibModal: ng.ui.bootstrap.IModalService
    ) {
        // i had to assign the value of $uibModal to a new variable, otherwise
        //$uibModal is undefined when accessed in the function showPromo().
        this.modal = $uibModal;
    }

    private showPromo(): void {

        let modalInstance = this.modal.open({
            animation: "true",
            templateUrl: 'promoModalContent.html'
        });
    }
}

如果有人能解释为什么我们需要一个新的变量，那将会很棒！

Answer 2

你没有注射$uibModal。尝试将其添加到$inject：

中

static $inject = ['pdpService', '$sce', 'angularLoad', '$uibModalInstance', '$uibModal'];

无法在打字稿

2 个答案: