angular2-toaster自定义类

Question

我们在我们的项目中使用了angular2-toaster，我遇到了一个问题，那就是我不能向toaster实例添加自定义类。

我的烤面包机配置看起来很棒，我想要传递带有烤面包机自定义类的customClass数组。

showToaster(msg: string, customClass: string | string[]) {
   const toast: Toast = {
     type: customClass[0],
     body: msg
   };

   this.toasterService.pop(toast);
}

Answer 1

您可以使用ToasterConfig，然后将其绑定到您的toaster-container。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <toaster-container [toasterconfig]="config"></toaster-container>
      <button (click)="popToast()">pop toast</button><br/>
    </div>
  `,
})
export class App {

  public config : ToasterConfig = new ToasterConfig({
    typeClasses: {
      class1: 'custom-class-1',
      class2: 'custom-class-2',
      class3: 'custom-class-3'
      /* goes on */
    }
  });

   /*
   other stuff of component 
   */
}

然后你就可以像你发布的那样使用它：

showToaster(msg: string, customClass: string | string[]) {
   const toast: Toast = {
     type: customClass[0], // class1 or class2 or class3 or etc
     body: msg
   };

   this.toasterService.pop(toast);
}

参考文献：

https://github.com/Stabzs/Angular2-Toaster/issues/110

https://github.com/Stabzs/Angular2-Toaster/blob/master/src/toaster-config.ts

http://plnkr.co/edit/gZTxVXD8lN3fibqhDYod?p=preview