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

问题描述

我想将子组件的事件发射器绑定到父组件，但父组件是app.component"，所以我假设两者之间的关系不是声明而是隐式的.
在 this 答案中，我看到了如何将事件发射器添加到已明确声明为父级的子级:

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

const appRoutes: Routes = [{ 路径:'**'，组件:子}];

该组件基本上代表站点的启动页面，并且在未提供完整身份验证的情况下也用作警卫中的重定向.
我想做的是向 child 添加一个事件发射器，通知 app.module 发生变化.
我已经在 child 中实现了一个带有 @Output() 装饰器的 EventEmitter，并且我还实现了将在app.module 但我找不到在两个组件中注册此绑定的地方.
由于所有组件都是 app.component 的子组件，因此 app.component 不应提供一种方法来注册来自其子组件的传入输入，而无需先将它们显式声明为子组件?

解决方案

好吧，据我所知，您必须明确绑定 app.component 和 child.component 实际使事件发射器工作.

从您的场景来看，您也可以考虑使用 Subject 来实现相同的效果.您不必为每个 child.component 明确定义，而是可以简单地订阅并监听正在发生的任何更改.

我创建了一个帮助链接两个兄弟姐妹 &父组件说话.您可以为多个孩子和一个父母做同样的事情

app.component.html

输入名称:<input type="text" [(ngModel)]="myTextVal"><button (click)="sendTextValue()">点击我发送到Hello组件</button><你好></你好>

app.component.ts

导出类 AppComponent {myTextVal:字符串；构造函数(私有应用服务:AppService){}发送文本值(){this.appService.passValue(this.myTextVal);}}

app.service.ts

@Injectable()导出类 AppService {public stringSubject = new Subject();传递值(数据){//将数据作为下一个 observable 传递this.stringSubject.next(data);}}

hello.component.ts

<预><代码>@成分({选择器:'你好'，模板:`<h1>你好{{name}}！</h1>`，样式:[`h1 { 字体系列:拉托；}`]})导出类 HelloComponent {名称:字符串；构造函数(私有应用服务:AppService){}ngOnInit() {this.appService.stringSubject.subscribe(数据 =>{console.log('下一个订阅值:' + data);this.name = 数据；});}}

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?

解决方案

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

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