Question

我有一个包含两个模块的angular v6项目，其中包含AppComponent和BoatComponet的app.module.ts，它还导入了另一个模块draggable.module.ts。

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    BoatComponent    
  ],
  imports: [
    BrowserModule,
    DraggableModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

draggable.module.ts

@NgModule({
  imports: [
    CommonModule,
    OverlayModule,
  ],
  declarations: [
    DraggableDirective,
    DropzoneDirective,
  ],
  exports: [
    DraggableDirective,    
    DropzoneDirective,
  ],
  providers: [
    DroppableService
  ]
})
export class DraggableModule { }

此DraggableModule包含一个名为DroppableService的服务，我想将其注入到BoatComponent中（在主模块中定义）

droppable.service.ts

@Injectable({
  providedIn: 'root'
})

export class DroppableService {
  dragStart$: Observable<PointerEvent>;
  dragEnd$: Observable<PointerEvent>;
  dragMove$: Observable<DraggingBoat>;  

  private dragStartSubject = new Subject<PointerEvent>();
  private dragEndSubject = new Subject<PointerEvent>();
  private dragMoveSubject = new Subject<DraggingBoat>();  

  constructor(@SkipSelf() @Optional() private parent?: DroppableService) {
    console.log('droppable service has been created!');
    this.dragStart$ = this.dragStartSubject.asObservable();
    this.dragEnd$ = this.dragEndSubject.asObservable();
    this.dragMove$ = this.dragMoveSubject.asObservable();    
  }

  onDragStart(event: PointerEvent) {
    this.dragStartSubject.next(event);

    if (this.parent) {
      this.parent.onDragStart(event);
    }
  }
}

boat.component.ts

@Component({
  selector: 'app-boat',
  templateUrl: './boat.component.html',
  styleUrls: ['./boat.component.scss']
})

export class BoatComponent {

  constructor(public element: ElementRef,
    private droppableService: DroppableService) {    
  }

    @HostListener('document:pointermove', ['$event'])
    onPointerMove(event: PointerEvent): void {
        if (!this.dragging) {
          return;
        }

        const clientRect = this.element.nativeElement.getBoundingClientRect();
        const draggingBoat: DraggingBoat = {
          objectRect: {
            top: Math.round(event.clientY - this.startPosition.y),
            bottom: Math.round(event.clientY - this.startPosition.y + clientRect.bottom - clientRect.top),
            left: Math.round(event.clientX - this.startPosition.x),
            right: Math.round(event.clientX - this.startPosition.x + clientRect.right - clientRect.left)
          },
          pointerEvent: event
        };

        this.droppableService.onDragMove(draggingBoat);   
    }
}

我遇到了“无法读取未定义的属性'onDragMove'”。为什么？这可能吗？

Answer 1

我发现了问题所在。它与服务无关。基本上，我有另一个Component扩展了BoatComponent，并且未在构造函数和超级容器中传递服务。这在问题中不可见，因为我从未想过！

export class SpecificBoatComponent extends BoatComponent {
  constructor(public element: ElementRef, droppableService: DroppableService) {
    super(element, droppableService);
  }
}

只需在其中添加另一个参数即可。

来自其他模块的组件中注入的服务为空

1 个答案: