Угловой материал тост с использованием машинописного текста

Question

Я новичок в Typcript и хочу отображать диалоговое окно с угловым материалом с машинописным текстом, но я не могу настроить контроллер, потому что машинопись означает, что «контент» не существует. Что правильно, но как я могу сказать, что он существует?

Вот мой код:

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, как решимость тоста и принять его в качестве аргумента контроллера. i.e

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