Question

在Angular 2的旧版本中，我可以导入类似的指令 import {CounterDirective} from './counter.directive';

并使用它。

自新的App Module以来，我找不到任何关于如何制作我自己的模块并将其导入我的应用程序的文档。例如，我使用Angular-CLI创建了一个指令：ng g directive counter来创建一个给定数字的计数器。这是我的指令代码：

import { Directive,Output,Input,EventEmitter } from '@angular/core';

@Directive({
  selector: '[counter]'
})
export class CounterDirective {

  constructor() { }

  @Output() countoChange = new EventEmitter();
    private _timer;
    private _duration: number;
    private _countTo: number;
    private _countFrom: number;
    private _step: number;

    @Input()
    set duration(duration) {
        this._duration = parseFloat(duration);
        this.run();
    }

    @Input()
    set countTo(countTo) {
        this._countTo = parseFloat(countTo);
        this.run();
    }

    @Input()
    set countFrom(countFrom) {
        this._countFrom = parseFloat(countFrom);
        this.run();
    }

    @Input()
    set step(step) {
        this._step = parseFloat(step);
        this.run();
    }

    run() {
        var _this = this;
        clearInterval(_this._timer);

        if (isNaN(_this._duration)) {
            return false;
        }

        if (isNaN(_this._step)) {
            return false;
        }

        if (isNaN(_this._countFrom)) {
            return false;
        }

        if (isNaN(_this._countTo)) {
            return false;
        }

        if (_this._step <= 0) {
            console.info('Step must be greater than 0.');
            return false;
        }

        if (_this._duration <= 0) {
            console.info('Duration must be greater than 0.');
            return false;
        }

        if (_this._step > _this._duration*1000) {
            console.info('Step must be equal or smaller than duration.');
            return false;
        }

        var intermediate  = _this._countFrom;
        var increment     = Math.abs(_this._countTo - _this._countFrom) / ((_this._duration * 1000) / _this._step);

        _this.countoChange.emit(intermediate);

        _this._timer = setInterval(function() {
            if (_this._countTo < _this._countFrom) {
                if (intermediate <= _this._countTo) {
                    clearInterval(_this._timer);
                    _this.countoChange.emit(_this._countTo);
                } else {
                    _this.countoChange.emit(intermediate);
                    intermediate -= increment;
                }
            } else {
                if (intermediate >= _this._countTo) {
                    clearInterval(_this._timer);
                    _this.countoChange.emit(_this._countTo);
                } else {
                    _this.countoChange.emit(intermediate);
                    intermediate += increment;
                }
            }
        }, _this._step);
    }

}

如何使用AppModule导入并使用它？

Answer 1

如果要为指令创建自己的模块，则需要在declarations中声明它，并将其导出到exports

@NgModule({
  declarations: [ CounterDirective ],
  exports: [ CounterDirective ]
})
class CounterModule {}

无论谁想要使用它，都需要导入CounterModule

@NgModule({
  imports: [ CounterModule ]
})
class SomeModule {}

请记住，declarations（组件，指令和管道）中的任何内容都不会继承。这意味着仅将CounterModule导入AppModule 将不会在所有其他模块中授予对它的访问权限。无论您使用CounterDirective进入何种模块，都需要导入CounterModule。

如果该指令仅用于AppModule，那么您需要做的就是将指令添加到AppModule declarations

Angular 2指令＆amp;模块

1 个答案: