не в состоянии передать функцию из одного компонента в другой компонент - PullRequest
Новая
       0

не в состоянии передать функцию из одного компонента в другой компонент

0 голосов
/ 17 февраля 2020

В моем файле angular есть два компонента. одним из них является компонент обсуждения, и в рамках компонента обсуждения я создал еще один компонент, называемый компонентом add-files.

Я хочу передать функцию из компонента обсуждения в компонент add-files. Но я не могу чтобы выполнить это действие.

вы можете увидеть мои усилия ниже. компонент add-files 

@Input('removeFile')
  removeAttachments: boolean = false;

removeitem($event: string)
{
  alert("in file component");
  this.uploader.clearQueue();
}

обсуждение.component. html

<div class="col-12 col-sm-6 col-lg-6">
            <input type="submit" value="Send" (click)="removeitems1()" class="greenBtn float-right addCommentsBtn"
              [disabled]="commentForm.pristine || commentForm.invalid" onclick="closeCommnetPopupBox()">
          </div>

<app-add-files  (removeitems)="removeitem($event)"></app-add-files>

обсуждение.component.ts 

removeitems1()
{
  alert("called");
  this.sessionService.SetSessionItem("removeUploadfile","true");
  //this.comp.removedoc();
  this.removeitem.emit("hi");
}

, которое видно из приведенного выше кода Я хочу вызывать функцию в компоненте add-files всякий раз, когда пользователь нажимает кнопку отправки.

приведенный выше код не работает, и я новичок в Angular. кто-нибудь может предложить что-то?

1 Ответ

0 голосов
/ 17 февраля 2020

Есть два варианта, для которых вы можете go. Первый похож на ваш путь. Проблема в том, что вы проходите мероприятие один раз. Но вы хотите, чтобы триггер срабатывал при каждом его изменении: 

@Input() set removeFile(data: boolean) { this.anyFunction(data); }

anyFunction(data) {
  // do some code here
}

Второй вариант - создать службу (которую я вам рекомендую). Вы можете сделать это с помощью angular -cli (ng gs servicename).

Discussion.service.ts: 

export class DiscussionService {

  buttonClick: EventEmitter<boolean> = new EventEmitter();

  constructor() { }
}

. Таким образом, вы создали службу с EventEmitter, который доступен для каждого компонента, который включает в себя службу. Вы можете узнать больше о EventEmitters здесь https://angular.io/api/core/EventEmitter. Чтобы подвести итог, вам просто нужно отправить событие по компоненту:

обсуждение.component.ts: 

constructor(private discussionService: DiscussionService) { }

clickFkt() { this.discussionService.buttonClick.emit(true) }

обсуждение.component. html: 

<input (click)="clickFkt()">

Теперь вы можете подписаться на каждый компонент вашего сервиса:

add-files.component.ts: 

constructor(private discussionService: DiscussionService) { }

ngOnInit() {
   this.discussionService.buttonClick.subscribe(click => {
       this.anyFunction(click);
   });
}
anyFunction(data) {
   // do some code here
}
...