使用Typescript的角材料烤面包

Question

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

这里是我的代码：

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

} 

Answer 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为土司的决心和接受它作为控制器的参数。即

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