使用NodeWaves NPM包和Angular 2

我正在尝试在Angular 2项目中使用node waves NPM包，但是很难找到任何可以帮助我的例子

这是我正在努力工作的软件包和库

我已经安装了来自NPM的软件包，我需要并在我的组件中使用它，如下所示

import {Component, Input, ViewEncapsulation, ElementRef} from '@angular/core';
import {NavItem} from "../nav-item";
var Waves = require('node-waves');

@Component({
    selector: 'app-nav-item',
    templateUrl: './nav-item.component.html',
    styles: [ require('./nav-item.component.scss') ],
    encapsulation: ViewEncapsulation.Native
})

export class NavItemComponent {

    @Input()
    item: NavItem;

    constructor(el: ElementRef) {
        Waves.attach(el.nativeElement, null);

        var config = {
            duration: 500,
            delay: 200
        };

        Waves.init(config);
    }
}

上述组件的模板如下所示，在

标记中生成

<li>
    <div id="testdiv" class="testclass">
        <a routerLink="{{item.href}}" routerLinkActive="active-link">
            <i class="fa fa-fw {{item.icon}}"></i>
            <span>{{item.name}}</span>
        </a>
    </div>
</li>

---

当我单击

元素时，波浪效果不起作用，有人能提供一些关于我可能做错了什么的见解吗。谢谢（我是新来的）/

首先，我认为您初始化的位置不正确。您需要在页面上实例化组件之后点击它，如果您要使用该方法，在afterviewinit事件中可能会更好

或者，我发现使用路由框架并捕获navigationend事件，然后调用init事件似乎是可行的。这样，您就不必在每个组件中进行初始化。有点像这样：

constructor( private router: Router )
{
    router.events.subscribe( ( event: RouterEvent ) =>
    {
        if ( event instanceof NavigationEnd )
        {
            Waves.attach( '.btn', ['waves-float'] );
            Waves.attach( 'button', ['waves-float'] );
            Waves.init(); 
        } 
    } ); 
}

---

你有什么错误吗？你看到开发人员工具的错误了吗？没有，一点错误都没有，这就是为什么我不知道该怎么做。。。我想知道是否有人能够让node waves包作为angular2应用程序的一部分使用ViewEncapsulation.Native和Webpack2进行构建？

constructor( private router: Router )
{
    router.events.subscribe( ( event: RouterEvent ) =>
    {
        if ( event instanceof NavigationEnd )
        {
            Waves.attach( '.btn', ['waves-float'] );
            Waves.attach( 'button', ['waves-float'] );
            Waves.init(); 
        } 
    } ); 
}