Question

如果我有多个级别的角度分量，该如何使用@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可以深入钻探一些组件，实现此目的的最佳方法是什么，您可以提供示例吗？

Answer 1

可能有2种方法：

使用@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，该服务可以直接由祖父母。另外，要使该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
      })
   }
}

Answer 2

使用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;})
}

Answer 3

为此目的，有一个名为ng-interconnect的精彩库。您可以使用此库将事件从任何组件发送到任何组件。

该库可用于创建-

广播者-一个向多个接收者发送多个事件的消息点
侦听器-一个消息点，可侦听多个连接

let messageStream: IMessageStream = createBroadcaster('home/stateChanged');   //Create a broadcaster```
 
 ...
 ...
 /*Receive from it from another component somewhere in the hierarchy*/
 
 let userReceiver = receiveFrom('home/stateChanged', 'contacts/user', (data, error, complete) => {
  console.log(data);
  console.log(error);
  console.log(complete);
 })
 
 
 '''
 '''
 /*Broadcast messages from the first component*/
 nessageStream.emit('logged-in');

如何以现代角度将事件从孙子孙女传给祖父母？

3 个答案: