Question

编码到子组件mycomponent.ts

String click = new Intent.getStringExtra("key");
if(click.equal("button1")){
 FragmentManager fragmentManage = getSupportFragmentManager();
        fragmentManage.popBackStack();;
        fragmentManage.beginTransaction().add(R.id.framLayout, new FragmentTab_One()).commit();
} else if(click.equal("button2")){
 FragmentManager fragmentManage = getSupportFragmentManager();
        fragmentManage.popBackStack();;
        fragmentManage.beginTransaction().add(R.id.framLayout, new FragmentTab_Second()).commit();
}

将数据传递到父组件app.component.ts

import { Component, OnInit , EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-mycomponent',

  template: `
    <button (click)="clickchild()">Click me!</button>
  `
})
export class MycomponentComponent {


  @Output() clicked = new EventEmitter<string>();
  clickchild() {
    this.clicked.emit('This is Child Component Code!');
  }
}

我的问题是->

为什么我们再次定义onClicked函数并将字符串传递给Parent Component，

childdata ='';

import { Component , EventEmitter, Output } from '@angular/core';
import { MycomponentComponent } from './mycomponent.component';
@Component({
  selector: 'app-root',
template: `
<h2>sdsd</h2>

<app-mycomponent (clicked)="onClicked($event)"></app-mycomponent>
<p>{{childdata}}</p>
`

})
export class AppComponent {

    childdata= '';

    onClicked(value: string) {
        this.childdata = value;
    }

}

尽管我们已经在子组件中做到了，但我们已经在其中定义了功能

onClicked(value: string) {
    this.childdata = value;
}

Answer 1

在子项的click事件期间，可能要通知父组件该子项已被单击。这就是为什么我们在父级中监听子级的clicked事件的原因。但是必须执行的操作（在您的情况下是设置成员的某些本地状态）可以在父级或子级中完成，具体取决于应用程序的需要以及必须读取或修改的属性（因为它们可能会出现子项或父项，具体取决于应用程序的架构。

如果您希望父组件不需要通过孩子的点击来通知，那么最好不要听它，并在子事件侦听器本身中进行适当的更改。

Answer 2

Childcomponent发出click事件。您的子组件的click事件会发出一个字符串，如下所示：

 @Output() clicked = new EventEmitter<string>();

  clickchild() {
    this.clicked.emit('This is Child Component Code!');
  }

事件的有效负载（在这种情况下为字符串）可以通过参数$ event访问。您可以通过以下方式预订父组件的click事件：

<app-mycomponent (clicked)="onClicked($event)"></app-mycomponent>

onClicked(value: string) {
    this.childdata = value;
}

因此，子组件会发出click事件，但必须由父组件识别（使用订阅），否则父组件将不知道所发出的事件。

有关文档，请参见此处：https://angular.io/api/core/EventEmitter

Sagat

EventEmitter类的清晰概念

2 个答案: