Как передать событие от внуков к бабушке и дедушке в современном ангуляре? - PullRequest
Новая
       16

Как передать событие от внуков к бабушке и дедушке в современном ангуляре?

0 голосов
/ 15 июня 2019

Если у меня несколько уровней угловых компонентов, как я могу использовать @Output, чтобы событие отправляло действие от потомка к прародителю?

Дедушка: 

<parent (handleClick)="grandmaHandleClick($event)">
<parent>
...
grandmaHandleClick(event) {
  console.log('grandma knows you clicked')
}

Родитель: 

<child (handleClick)="handleClick($event)">
</child>

Ребенок: 

<div (click)="onClick">Click button
</div>
...
@Output() handleClick = new EventEmitter
onClick() {
  this.handleClick.emit('clicked a button')
}

Я пытаюсь сделать так, чтобы @Output мог поддерживать детализацию нескольких компонентов, каков наилучший способ сделать это, и можете ли вы привести пример?

Ответы [ 2 ]

1 голос
/ 15 июня 2019

Возможны 2 варианта:

  1. Использование @output (в вашем случае это не очень хороший вариант):

Дедушка 

<parent (notifyGrandParent)="grandmaHandleClick($event)">
<parent>
...
grandmaHandleClick(event) {
  console.log('grandma knows you clicked')
}

Родительский : 

<child (handleClick)="childEvent($event)">
</child>

@Output() notifyGrandParent= new EventEmitter();
childEvent(event) {
  this.notifyGrandParent.emit('event')
}

Дочерний элемент правильно реализован в коде, поэтому его можно использовать.

Использование BehaviorSubject через Service: с таким большим уровнем вложенности вы можете создать некий сервис, такой как EventService, а затем создать BehaviorSubject, который может быть напрямую подписан GrandParent.Кроме того, чтобы сделать этот service более конкретным компонентом, вы можете сохранить эту службу в module, который будет иметь 3 других компонента (GrandParent, Parent и Child) 
export class EventService{

 private childClickedEvent = new BehaviorSubject<string>('');

  emitChildEvent(msg: string){
     this.childClickedEvent.next(msg)
  }

  childEventListner(){
     return this.childClickedEvent.asObservable();
   } 

}

, а затем вcomponents:

ChildComponent 

export class ChildComponent{
   constructor(private evtSvc: EventService){}

   onClick(){
     this.evtSvc.emitChildEvent('clicked a button')
   }
}

GrandParent 

export class GrandComponent{
   constructor(private evtSvc: EventService){}

   ngOnInit(){
     this.evtSvc.childEventListner().subscribe(info =>{
         console.log(info); // here you get the message from Child component
      })
   }
}
0 голосов
/ 15 июня 2019

Используйте rxjs / subject, это может быть наблюдателем и наблюдаемым в одно и то же время.

Использование:

1.Создать объект Свойство в службе: 

import { Subject } from 'rxjs';

export class AuthService {
   loginAccures: Subject<boolean> = new Subject<boolean>();
}

2. Когдасобытие произошло при использовании дочерней страницы / компонента: 

logout(){
  this.authService.loginAccures.next(false);
}

3. И подписаться на тему на родительской странице / компоненте: 

constructor(private authService: AuthService) {
    this.authService.loginAccures.subscribe((isLoggedIn: boolean) => {this.isLoggedIn = isLoggedIn;})
}
...