Javascript 角度10-事件正视器不工作-在子组件和父组件之间共享信息

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

这是我遵循的角度指南：

父视图：

<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 {
  }
}

客户列表
{{customr.name}
父控制器：
从'@angular/core'导入{Component，OnInit，Output}；
@组成部分({
选择器：'应用程序客户列表'，
templateUrl:“./customer list.component.html”，
样式URL:['./客户列表.component.scss']
})
导出类CustomerListComponent实现OnInit{
//列表=[
//{id:1，名字：'John Smith'}，
//{id:2，名字：'Anna Highland'}，
//{id:3，名字：'Emilie Poiret'}
// ];
客户：阵列=[
{
id:1，
姓名：“约翰·史密斯”
},
{
id:2，
姓名：“安娜高地”
},
{
id:3，
姓名：“Emilie Poiret”
}
];
附加项（客户）{
log（`addcustomer${customer}`）；
}
构造函数（）{}
updateCustomer（数据）{
控制台日志（数据）；
}
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>

{{name}

客户名称：
行动

子控制器：

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

}

从'@angular/router'导入{ActivatedRoute，Params}；
从“@angular/core”导入{Component，Input，OnInit}；
从'@angular/forms'导入{AbstractControl，FormBuilder，FormGroup，Validators}；
从“@angular/core”导入{Output，EventEmitter}；
@组成部分({
选择器：“应用程序客户详细信息”，
templateUrl:“./customer detail.component.html”，
样式URL:['./客户详细信息.component.scss']
})
导出类CustomerDetailComponent实现OnInit{
// https://angular.io/guide/inputs-outputs#sending-数据到父组件
@Output（）newItemEvent=newEventEmitter（）；
formGroup:formGroup；
id：字符串；
名称：字符串；
addNewItem（）{
//log（`emit runs${value}`）；
设id:any=this.id；
让name=this.formGroup.value.customerName；
log（`id:${this.id}i name:${this.formGroup.value.customerName}`）；
让客户={
'id'：this.id，
“名称”：this.formGroup.value.customerName
};
控制台。警告（客户）；
this.newItemEvent.emit（客户）；
}
构造函数（私有fb:FormBuilder，私有路由：ActivatedRoute）{}
ngOnInit（）：void{
this.routes.params.subscribe(
（参数：参数）=>{
this.id=params.id；
this.name=params.name；
}
);
log（`ngOnInit${this.name}`）；
这个.buildForm（）；
}
私有buildForm（）：void{
log（`buildForm${this.name}`）；
this.formGroup=this.fb.group({
客户名称：[this.name，Validators.required]
});
}
公共存储编辑（）{
log（`saveedit`）；
返回{'id'：this.formGroup.value.customerId，'name'：this.formGroup.value.customerName}；
}
}

---

当我点击按钮时，我看到console.log，它正在执行addNewItem，但在父组件函数的addItem上，我没有看到console.log，目标是传递id和客户名称，以便我可以使用客户的新信息更新客户阵列

路由器出口组件只是角度路由器使用的一个标记，以便知道在何处放置为不同路由渲染的组件。在此组件上放置事件侦听器将不会产生任何结果，因为它不是实际的路由组件

您可以使用

服务

或执行以下操作：

导出类AppComponent{
@ViewChild（RouterOutlet）出口：RouterOutlet；
构造器（路由器：路由器）{
router.events.pipe（过滤器（e=>e instanceof NavigationEnd））.subscribe（（）=>{
常数c=此.outlet.component；
});
}
}

查询路由器出口组件

侦听导航结束事件，以便在路由的组件发生更改时获得通知

获取当前组件实例并对其执行一些操作。在您的情况下，您将有一个事件发射器，您可以订阅该事件

---

在这里，我假设这将在AppComponent中使用，我还没有取消订阅，但是如果您在一个内部组件中使用它，其中您有一个命名的outlet，该组件可能会在某个时候被销毁，确保取消订阅流以防止内存泄漏。

这不起作用的主要原因是@user1提到，

不能像组件那样接收参数。此外，他关于创建一个服务以在组件之间共享所有信息的建议，这是最合适的，也是Angle文档推荐的：

the

无法接受发出的事件。如果您仔细阅读本教程，您将看到父组件的选择器捕捉到事件。是的，我看到了它，但它是我必须将子组件放置在父组件中的元素。在我的app.component.html上，我只有一个头部组件，它在整个应用程序和一个路由器插座上总是相同的。如果这是不可能的，我有什么机会？对-所以你已经尝试了即兴创作的角度啧啧-我明白，但角度是太复杂了，黑客在时尚。但是，既然你正在取得进步，你应该考虑帮助你解决你的问题。这是大多数企业应用程序的编写方式。服务似乎更有可能工作。我将使用此链接，谢谢链接