Question

我正在尝试将节点波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>元素时波浪效果不起作用。谢谢（我很新）......：/

Answer 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(); 
        } 
    } ); 
}

使用带有Angular 2的节点波NPM包

1 个答案: