使用 Typescript 的角材料吐司

Posted 2023-03-13

【中文标题】使用 Typescript 的角材料吐司

【英文标题】：Angular material toast using Typescript

【发布时间】：2016-02-02 09:00:00

【问题描述】：

我是 Typescript 的新手，想用 typescript 显示一个 Angular Material 对话框，但我无法配置控制器，因为 typescript 说“内容”不存在。哪个是对的，但我怎么说 Typescript 它存在？

这是我的代码：

 interface IToastService 
    displayError(text: string): void;
    displaySuccess(text: string): void;


export class ToastService implements IToastService 
    public static $inject = ['$mdToast'];
    constructor(
        private $mdToast: angular.material.IToastService)  

    displayError(text: string): void 
        this.$mdToast.show(
            position: 'top left',
            controller: () => 
                this.content = text; // the Error Line
            ,            
            controllerAs: 'toast',
            template: '<md-toast>\
                         toast.content \
                        <md-button ng-click="toast.cancel()" class="md-warn">\
                                 <md-icon md-font-set="material-icons"> clear </md-icon>\
                    </md-button>\
                </md-toast>',
            hideDelay: 0
        );
    

    displaySuccess(text: string): void 

        this.$mdToast.show(

            template: '<md-toast>\
                         toast.content \
                           <md-icon md-font-set="material-icons" style="color:#259b24"> done </md-icon>\
                </md-toast>',
            hideDelay: 1000,
            position: 'top left',
            controller: () => 
                this.content = text;
            ,
            controllerAs: 'toast'
        )
    

【参考方案1】：

您应该提前将其声明为您的课程，即

export class ToastService implements IToastService 
   public content:string; //Here

   public static $inject = ['$mdToast'];
//...

但看起来您正在使用箭头运算符。这意味着属性content 不会附加到模态的控制器实例，而是附加到ToastService 实例（当模态控制器被实例化时）。我相信您需要将其声明为正常功能。

this.$mdToast.show(
        position: 'top left',
        controller: function() 
            this.content = text; //Now this is your controller instance
        ,            
        controllerAs: 'toast',
        //...
    );

您还应该能够将参数 text 作为 toast 的解析传递并接受它作为控制器的参数。即

    this.$mdToast.show(
        position: 'top left',
        controller: function(content:string) 
            this.content = content; 
            //If you define this as class, you could do "private content:string"
        ,            
        controllerAs: 'toast',
        resolve:
           content: () => text
           //Not sure if it is very specific only about a promise, if so you
           //would need to inject $q and do "content: ()=> $q.when(test)"
        
        //...
    );

【讨论】：

虽然我不明白你的第二个例子，但第一个例子对我很有用。谢谢！