Question

我是Angular 2的绝对初学者，我对我正在研究＆＃34;绑定到自定义事件＆＃34; 的教程示例有些怀疑。

所以我的主要组件有这个名为 app.component.html 的视图：

<div class="container">
  <app-cockpit
    (serverCreated)="onServerAdded($event)"
    (blueprintCreated)="onBlueprintAdded($event)">
  </app-cockpit>
  <hr>
  <div class="row">
    <div class="col-xs-12">
      <app-server-element
        *ngFor="let serverElement of serverElements"
        [srvElement]="serverElement"></app-server-element>
    </div>
  </div>
</div>

在此视图中定义了包含此子视图的子组件在上一个主视图中的 cockpit.component.html 文件内容：

<div class="row">
  <div class="col-xs-12">
    <p>Add new Servers or blueprints!</p>
    <label>Server Name</label>
    <input type="text" class="form-control" [(ngModel)]="newServerName">
    <label>Server Content</label>
    <input type="text" class="form-control" [(ngModel)]="newServerContent">
    <br>
    <button
      class="btn btn-primary"
      (click)="onAddServer()">Add Server</button>
    <button
      class="btn btn-primary"
      (click)="onAddBlueprint()">Add Server Blueprint</button>
  </div>
</div>

包含2个提交表单的按钮。

这是第一个怀疑，从我所理解的做出的事情：

(click)="onAddServer()

表示类似：＆＃34;当点击事件发生时，执行定义到此视图的控制器中的onAddServer（）方法＆＃34; 。

所以，进入 coockpit.component.ts 类，我有：

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

@Component({
  selector: 'app-cockpit',
  templateUrl: './cockpit.component.html',
  styleUrls: ['./cockpit.component.css']
})
export class CockpitComponent implements OnInit {

  /*
    EvebtEmitter è un oggetto del framework Angular che permette di emettere i nostri custom events
    @Output() decorator usato per passare qualcosa fuori dal component
   */
  @Output() serverCreated = new EventEmitter<{serverName: string, serverContent: string}>();
  @Output() blueprintCreated = new EventEmitter<{serverName: string, serverContent: string}>();

  newServerName = '';
  newServerContent = '';


  constructor() { }

  ngOnInit() {
  }

  onAddServer() {
    this.serverCreated.emit({serverName: this.newServerName, serverContent: this.newServerContent});
  }

  onAddBlueprint() {
    console.log('INTO onAddBluePrint()');
    this.blueprintCreated.emit({serverName: this.newServerName, serverContent: this.newServerContent});
  }

}

这应该是这样的：

newServerName 和 newServerContent 变量包含用户在表单中插入的数据，因为这些变量受 [（ngModel）] 的约束指令：

<input type="text" class="form-control" [(ngModel)]="newServerName">
<input type="text" class="form-control" [(ngModel)]="newServerContent">

当用户点击添加服务器按钮时， onAddServer（）方法将被执行，并且 serverName 和 serverContent 内容在extern发出：

this.serverCreated.emit({serverName: this.newServerName, serverContent: this.newServerContent});

所以一个疑问是：什么是一个繁琐的事件？在我看来，这是一个包含一些信息的简单Json对象。

然后第二个疑问是： serverCreated 事件由此控制器发出到extern，因为它是使用 @Output（）装饰器进行的。

什么是默认收件人？在我看来，它是父组件的控制器，因为在我的 app.component.ts 类中，我有这个方法来处理这个事件：

onServerAdded（serverData：{serverName：string，serverContent：string}）{ this.serverElements.push（{ 输入：＆＃39; server＆＃39;， name：serverData.serverName， content：serverData.serverContent }）; }

什么表示：

就像我说的那样，在主要组件的视图中，我说 app-cockpit 组件将这些事件抛给父组件。

我的推理是正确还是我错过了什么？所以这意味着我只能使用这个策略将一个事件从子组件传递给父组件或者我可以做相反的事情（从父对子，我不知道它是否是一个真实的用例场景）

Answer 1

你的理由基本上是正确的。

专门针对您的疑虑：

1）当您通过this.serverCreated.emit()方法调用发出事件时，例如在您的情况下，您可以传递任何对象的emit()方法的参数，因此也可以传递纯javascript Json对象。您可以传递任何其他对象，您可以将其定义为Typescript类的实例以及任何基本类型，如字符串或数字

2）使用@Output（）装饰器定义的事件可以由Parent组件监听，因此可以用作允许子组件与其父组件通信的机制。父组件可以通过对称@Input（）机制将参数传递给其子组件。

您可以在https://angular.io/guide/component-interaction

获取组件之间相互通信的完整方法列表

关于自定义事件绑定的Angular 2教程究竟如何运作？

1 个答案: