Materialise.toast角2

Question

我正在研究角度2.我使用了materialize-css，它适用于类但问题来自于materialize toast。我使用gulpfile.js配置了materialize我需要在gulpfile中添加任何其他js文件吗？

<a class="btn" (click)="Materialize.toast('I am a toast', 4000)">Toast!</a>

使用此控制台显示错误
Materialize is not defined

Answer 1

这对我有用。希望我知道为什么 - 我无法在任何地方找到这个记录。

import { toast } from 'angular2-materialize';

ngOnInit() {
   toast("I am the best toast there is!", 4000);
}

Answer 2

您需要为项目正确配置Materialise CSS。我自己使用Angular 2 Materialize。

Answer 3

您的component.ts

import { toast } from 'angular2-materialize';

ngOnInit() {}

miToast() {
    toast("I am the best toast there is!", 4000);
}

您的componen.html

<a class="btn" (click)="miToast()">Toast!</a>

或者您也可以使用

您的component.ts

// imports...

declare var Materialize: any;

ngOnInit() {}

miToast(){
    Materialize.toast("I am the best toast there is!", 4000);
}

Answer 4

看起来为时已晚，但对于未来的人们来说

这是导入方式

import {Toast} from 'materialize-css';

然后在模板上

<a class="btn" (click)="toast()">Toast!</a>

最后是该组件的打字稿文件

toast() {
// to avoid lint warnings
// tslint:disable-next-line:no-unused-expression
new Toast({
  html: 'I am a toast',
  classes: 'rounded',
  displayLength: 4000
});

}

仅此而已