1

我想手动订阅由指令发出的事件，根据设计，它应该可用于我的应用程序的多个组件。目前结构如下：

AppComponent
  Draggable.Directive (uses an attribute of a DOM element to control the behaviour)

  (and then, via routing)
  Parent1 Component
     Child1 Component
     Child2 Component

app.module看起来像这样：

@NgModule({
  imports:      [ BrowserModule, HttpModule, JsonpModule, RouterModule.forRoot(appRoutes) ],
  declarations: [ AppComponent, FooComponent, BarComponent, ParentComponent, DraggableDirective ],
  bootstrap:    [ AppComponent ]
})

在开发的后期，另一个 Parent 组件将监听可拖动指令并实现自己的逻辑。

没有一个子组件知道（或应该关心） Draggable Directive 对它做任何事情。父组件应该。因此，在父组件中：

import { Component, OnInit, ViewChild } from '@angular/core';
import { DraggableDirective } from './draggable.directive';
import { FooComponent } from './foo.component';
import { BarComponent } from './bar.component';

@Component({
  selector: 'parent-view',
  templateUrl: './parent.component.html',
  providers: [DraggableDirective],
  moduleId: module.id
})

export class ParentComponent implements OnInit {
  @ViewChild('foo') fooC:FooComponent;
  @ViewChild('bar') barC:BarComponent;

  constructor(private draggable:DraggableDirective){
    draggable.droppedOn.subscribe(event => {
      console.log('listening', event);
    })
  }

  ngOnInit(): void {
   // updated
   // child view components
   this.fooC.fooInit();
  }

这是指令，使用 Subject 而不是 EventEmitter，正如其他地方所推荐的：

import { Directive, ElementRef, Renderer, HostListener, AfterViewInit } from '@angular/core';
import {Subject} from 'rxjs/Rx';

@Directive({
    selector: '[draggable], [data-draggable]'
})

export class DraggableDirective implements AfterViewInit {

    public droppedOn = new Subject();

    //... at some point this method is envoked
    couldDrop():void {

        if ( this.dElem ) {
            let _attr = this.dElem.dataset.indexed;
            console.log('emitting', _attr);
            this.droppedOn.next(_attr);

        }

    }
}

我得到带有正确值的控制台日志“发射”。我从来没有从控制台的父组件中得到“监听”。我在这里做错了什么？

4

1 回答 1

2

您创建的指令不是服务，因此它不会进入@Component'providers数组，而是进入declarations。参见例如https://angular.io/docs/ts/latest/guide/attribute-directives.html（您也可以添加它NgModule）

也ParentComponent无法将模板中某处使用的指令的实例传递给其构造函数。这ViewChildren就是为了。参见例如：https ://angular.io/docs/ts/latest/api/core/index/QueryList-class.html

因此，ParentComponent您订阅的实例与DraggableDirective您的模板使用的实例不同。

于 2016-12-06T14:52:06.173 回答