从组件到app.component的角度EventEmitter [英] Angular EventEmitter from component to app.component

问题描述

我想将事件发射器从子级绑定到父级组件，但是父级组件是'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>

但是在我的应用中，子组件(让其称为id:child)不是用这种方式声明的，而是在app.module中声明为路由的:

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}
];

此组件基本上代表网站的初始页面，并且在没有提供完整身份验证的情况下，还用作防护中的重定向.
我想做的是将事件发射器添加到child，以通知app.module更改.
我已经用@Output()装饰器在child和EventEmitter中实现了，并且我还实现了将在app.module中调用的方法，但是我只是找不到在两个中注册该绑定的地方组件.
由于所有组件都是app.component的子级，因此app.component不应提供一种方法来注册其子级的传入输入，而无需先将它们明确声明为子级吗?

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?

推荐答案

好吧，据我所知，您必须显式绑定app.component和child.component才能真正使事件发射器正常工作.

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

根据您的情况，您还可以考虑使用Subject来实现相同的目的.您不必为每个child.component显式定义，而是只需订阅并收听正在发生的任何更改.

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

这篇关于从组件到app.component的角度EventEmitter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！