Как написать функцию подписчика Angular 6

Question

Я видел код в видео, и это выглядит следующим образом.

this.droppableService.dragEnd$.subscribe( next:event=> this.onDragEnd(event));

При включении его в мою директиву папка выдает ошибку следующим образом.

ERROR in src/app/draggable/dropzone.directive.ts(16,49): error TS1005: ',' expected.

Как я могу реализовать в Angular 6?

Answer 1

Вы можете назначить тип следующим образом:

this.droppableService.dragEnd$.subscribe( (next:event) => {
  this.onDragEnd(next);
});

Или, если событие имеет тип следующий:

this.droppableService.dragEnd$.subscribe( (event:next) => {
  this.onDragEnd(event);
});

Примечание: $ должны быть помещены в начале Observable, subject а также BehaviorSubjectне в конце.

Answer 2

this.droppableService.dragEnd$.subscribe( next:event=> this.onDragEnd(event));  

Это правильный способ определения функции подписчика в angular6,

Но проблема в синтаксисе функции стрелки, которую вы передали при вызове подписки.

определить синтаксис функции стрелки

(arguments)=>{
     ......  
     code 
     ..... 
 }

например, если у вас есть только одна строка кода в теле метода, вы можете определить функцию стрелки следующим образом

(argument)=> console.log('for single line in the method block');

но в случае, когда у вас есть одна строка кода, но более 2 аргументов или вам нужно определить тип аргумента (как вы делаете в вашем случае next: event), вам нужно следовать первому синтаксису.

такая же проблема, с которой вы сталкиваетесь в вашем случае

this.droppableService.dragEnd$.subscribe( next:event=> this.onDragEnd(event));

когда вы передаете аргумент next:Event (следующий аргумент типа Event) из-за ошибки при его создании.

если у вас есть intelliSense в вашем редакторе, он выдает предупреждение, что ожидаемый 1 получил 2 что-то подобное.

поэтому ниже определить оба синтаксиса должны работать.

• this.droppableService.dragEnd $.subscribe ((next:event) => {this.onDragEnd (event)});

• this.droppableService.dragEnd $.subscribe (next => this.onDragEnd (event));