Внедренный сервис в компоненте из другого модуля пуст - PullRequest
Новая
       8

Внедренный сервис в компоненте из другого модуля пуст

0 голосов
/ 13 октября 2018

У меня есть угловой проект v6, который содержит 2 модуля, app.module.ts, который содержит AppComponent и BoatComponet, он также импортирует другой модуль 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 «неопределенного».Зачем?Это возможно?

1 Ответ

0 голосов
/ 13 октября 2018

Я выяснил, в чем проблема.Это не связано с сервисом.По сути, у меня есть другой компонент, который расширяет компонент BoatComponent и не передает службу в construnctor и в super.Это не было видно в вопросе, потому что я никогда не думал об этом! 

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

Просто добавил еще один параметр.

...