angular2-toaster自定义类

Question

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

我的烤面包机配置看起来很不整齐，我想在内部传递带有自定义类的烤面包机的customClass数组。

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

   this.toasterService.pop(toast);
}

Answer 1

您可以使用 <span> {Array(Math.floor(rating)).fill(<i className="fa fa-star"></i>)} {(rating) - Math.floor(rating)==0 ? ('') : (<i className="fa fa-star-half"></i>)} </span> ，然后将其绑定到您的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 
   */
}

参考文献：

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