在 Angular 2 中使用 node-waves NPM 包答案

【问题标题】：Using node-waves NPM package with Angular 2在 Angular 2 中使用 node-waves NPM 包
【发布时间】：2017-05-16 00:44:13
【问题描述】：

我正在尝试将 node-waves NPM 包与我的 Angular 2 项目一起使用，但是很困难，我找不到任何可以帮助我的示例...

这是我正在尝试使用的包和库...

https://www.npmjs.com/package/node-waves

http://fian.my.id/Waves/

我已经从 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);
    }
}

上述组件的模板如下，在<app-nav-item></app-nav-item>标签内生成。

<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>

组件的 SCSS...

@import "../../../scss/_color.scss";
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
@import "../../../../node_modules/node-waves/dist/waves.min.css";

li {

  div {
    display: flex;
    align-items: center;

    a {
      padding-top: 10px;
      padding-bottom: 10px;
      text-decoration: none;
      display: flex;
      flex: 1 1 auto;
      align-items: center;
      color: $primary-color-text;

      i {
        padding-left: 16px;
        padding-right: 16px;
      }

      span {
        flex: 1 1 auto;
      }
    }

    a:hover {
      background-color: $accent-color;
      color: #212121;
    }
  }
}

.active-link {
  background-color: $accent-color-lighter;
  color: #212121;
}

谁能提供一些关于我可能做错了什么的见解，因为当我单击 <app-nav-item> 元素时波浪效果不起作用。谢谢（我很新）...：/

【问题讨论】：

您是否遇到任何错误？您是否从开发者工具中看到任何错误？
不，没有任何错误，这就是为什么我不知道该怎么做......我想知道有没有人能够让 node-waves 包作为 angular2 应用程序的一部分工作使用 ViewEncapsulation.Native 和 Webpack2 进行构建？

标签： angular

【解决方案1】：

首先，我认为您初始化的位置不正确。您需要在页面上实例化组件后点击它，如果您要使用该方法，在 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(); 
        } 
    } ); 
}

【讨论】：