Angular 10 - 事件发射器不工作 - 在子组件和父组件之间共享信息

Question

我在 Angular 中有这个父子组件，我试图将对象从子组件传递到父组件，以便更新父对象数组中的值。我一直在关注 angular 文档示例，但似乎它没有将新对象发送到 paren 组件，但它没有显示任何错误，无论是控制台还是 VSC 终端。

这是我遵循的 angular 指南：https://angular.io/guide/inputs-outputs#sending-data-to-a-parent-component

父视图：

<h1>Customers list</h1>

<mat-list>
  <a mat-list-item *ngFor="let customr of customers" [routerLink]="[customr.id, {name: customr.name}]">{{ customr.name }}</a>
</mat-list>


<router-outlet (newItemEvent)="addItem($event)"></router-outlet>

Parent controller:

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

@Component({
  selector: 'app-customer-list',
  templateUrl: './customer-list.component.html',
  styleUrls: ['./customer-list.component.scss']
})
export class CustomerListComponent implements OnInit {


  // list = [
  //   { id: 1, name: 'John Smith' },
  //   { id: 2, name: 'Anna Highland' },
  //   { id: 3, name: 'Emilie Poiret' }
  // ];

  customers: Array<Object> = [
    {
      id: 1,
      name: 'John Smith'
    },
    {
      id: 2,
      name: 'Anna Highland'
    },
    {
      id: 3,
      name: 'Emilie Poiret'
    }
  ];

  addItem(customer){
    console.log(`add customer ${customer}`);
  }

  constructor() { }

  updateCustomer(data){
    console.log(data);
  }

  ngOnInit(): void {
  }
}

子视图：

<p>{{ name }}</p>


<form [formGroup]="formGroup" (ngSubmit)='addNewItem()'>

  <mat-form-field>
    <mat-label>Customer name:</mat-label>
    <input matInput name="customerName" formControlName="customerName">
  </mat-form-field>

  <button mat-raised-button type="submit">Action</button>

</form>

子控制器：

import { ActivatedRoute, Params } from '@angular/router';
import { Component, Input, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-customer-detail',
  templateUrl: './customer-detail.component.html',
  styleUrls: ['./customer-detail.component.scss']
})
export class CustomerDetailComponent implements OnInit {

  // https://angular.io/guide/inputs-outputs#sending-data-to-a-parent-component
  @Output() newItemEvent = new EventEmitter<object>();

  formGroup: FormGroup;
  id: string;
  name: string;

  addNewItem(){
  //  console.log(`emit runs ${value}`);
    let id: any = this.id;
    let name = this.formGroup.value.customerName;
    console.log(`id: ${this.id} i name: ${this.formGroup.value.customerName}`);
    let customer = {
      'id': this.id,
      'name': this.formGroup.value.customerName
    };
    console.warn(customer);
    this.newItemEvent.emit(customer);
  }


  constructor(private fb: FormBuilder, private routes: ActivatedRoute) { }

  ngOnInit(): void {

    this.routes.params.subscribe(
      (params: Params) => {
        this.id = params.id;
        this.name = params.name;
      }
    );

    console.log(`ngOnInit ${this.name}`);

    this.buildForm();

  }

  private buildForm(): void {
    console.log(`buildForm ${this.name}`);
    this.formGroup = this.fb.group({
      customerName: [this.name, Validators.required]
    });

  }

  public saveEdit() {
    console.log(`Save edit`);
    return { 'id': this.formGroup.value.customerId, 'name': this.formGroup.value.customerName };
  }

}

当我点击按钮时，我看到它正在执行的 addNewItem console.log 但是在父组件函数的 addItem 上我没有看到 console.log，目标是通过id 和客户的名字，这样我就可以用客户的新信息更新客户数组

Answer 1

路由器出口组件只是一个标记，angular 路由器使用它来了解在何处放置为不同路由呈现的组件。在此组件上放置一个事件侦听器将不会产生任何结果，因为它不是实际的路由组件。

您可以使用 service 或执行以下操作：

export class AppComponent {
  @ViewChild(RouterOutlet) outlet: RouterOutlet;

  constructor(router: Router) {
    router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
      const c = this.outlet.component;
    });
  }
}

查询路由器出口组件
监听导航结束事件，以便在路由组件发生更改时得到通知。
获取当前组件实例并对其进行操作。在你的情况下，你将有一个事件发射器，你可以订阅该事件。

这里我假设这将在 AppComponent 中使用并且我没有取消订阅但是如果你在一个内部组件中使用它你有一个命名的插座并且组件可能会在某个时候被破坏, 请确保您取消订阅流以防止内存泄漏。

Answer 2

这不起作用的主要原因是因为正如@user1 提到的，<router-outlet> 无法像组件那样接收参数。此外，他关于创建服务以在组件之间共享所有信息的建议是最合适的，也是 Angular 文档推荐的：https://angular.io/tutorial/toh-pt4

Angular 10 - 事件发射器不工作 - 在子组件和父组件之间共享信息

Angular 10 - Event Emmiter is not working - Sharing information between child and parent component

javascript

angular

angular-event-emitter