angular2-toaster 自定义类

Question

我们在项目中使用 angular2-toaster，但我遇到了无法将自定义 class 添加到烤面包机实例的问题。

我的烤面包机配置看起来不错，我想传递 customClass 数组，其中包含内部烤面包机的自定义 classes。

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

angular2-toaster 自定义 类

angular2-toaster custom classes

angular

angular2-toaster

angular2-toaster 自定义类