我在Angular中有这个父子组件，我正试图将对象从子组件传递给父组件，以便更新父组件的对象数组中的值。我一直在遵循angular文档示例，但它似乎没有将新对象发送到paren组件，但它没有在控制台或VSC终端上显示任何错误。
这是我遵循的角度指南：https://angular.io/guide/inputs-outputs#sending-数据对板组件
父视图：
<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和客户名称，这样我就可以用客户的新信息更新客户阵列
路由器出口组件只是角度路由器使用的一个标记，以便知道将为不同路由渲染的组件放置在哪里。在该组件上放置事件侦听器将不会产生任何结果，因为它不是实际的路由组件。
你可以使用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中使用，我还没有取消订阅，但如果你想在有命名出口的内部组件中使用它，并且该组件可能会在某个时候被破坏，请确保取消订阅流，以防止内存泄漏。
这不起作用的主要原因是因为@user1提到<router-outlet>无法像组件那样接收参数。此外，他关于创建一个服务以在组件之间共享所有信息的建议是最合适的，Angular文档建议：https://angular.io/tutorial/toh-pt4