Angular EventEmitter from component to app.component

问题

I would like to bind an event emitter from a child to a parent component, but the parent component is the 'app.component'so i assume that the relationship between the two is not declared but implicit.
in this answer , i see how to add an event emitter to a child that has been explicitly declared as such, in his parent:

<child (notifyParent)="getNotification($event)"></child>

But in my app, the child component (lets call id: child), is not declared in that way, but its declared in the app.module as route:

const appRoutes: Routes = [
  { path: '**',      component:  Child}
];

This component basically represents a splash page to the site, and is also used as a redirect in a guard in case full authentication is not provided.
What i would like to do, is to add an event emitter to child that notifies app.module of a change.
I have already implemented, in child an EventEmitter with the @Output() decorator, and i have also implemented the method that will be invoked in app.module but i just cant find a place where to register this binding within the two components.
Since all components are children of app.component should not app.component provide a way to register for incoming input from its children, without the need of declaring them explicitly as children first?

回答1:

Well, from my understanding you'll have to explicitly bind the app.component and child.component to actually make the Event emitter work.

From your scenario, you can also consider using Subject to achieve the same. You dont have to explicitly define for every child.component, rather you can simply Subscribe and listen to any changes that are happening.

I have created one link to help two sibling & parent components talk. You can do the same for Several child and one parent

app.component.html

<br />
Enter a name:
<input type="text" [(ngModel)]="myTextVal">
<button (click)="sendTextValue()">Click Me to emit to Hello Component</button>
<hello></hello>

app.component.ts

export class AppComponent  {
  myTextVal: string;

  constructor(private appService: AppService){}

  sendTextValue(){
    this.appService.passValue(this.myTextVal);
  }
}

app.service.ts

@Injectable()
export class AppService {

  public stringSubject = new Subject<string>();

  passValue(data) {
    //passing the data as the next observable
    this.stringSubject.next(data);
  }

}

hello.component.ts


@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  name: string;

  constructor(private appService: AppService) {

  }

  ngOnInit() {
    this.appService.stringSubject.subscribe(
      data => 
      {
        console.log('next subscribed value: ' + data);
        this.name = data;
      }
    );
  }
}

回答2:

A parent-child component relation is given when your 'child' component is called in your 'parents' html template. So if your component is in your app.components html template then it's a child of app.component and you can pass data between the two using EventEmitters.

If there is another component between those two, then you'd have to use a service to share data.

回答3:

You will have to add

<child (notifyParent)="getNotification($event)"></child>

In your parent component template i.e. app.component in your case, in order to listen to the "notifyParent" event. Move the method implementation from app.module into app.component.ts file and it will work.

来源：https://stackoverflow.com/questions/49898893/angular-eventemitter-from-component-to-app-component

标签

angular

angular5

eventemitter