如何解决在这种情况下，如何正确地将值从第二级子组件传递到父组件？
我不太喜欢Angular和TypeScript（我来自Java），需要解决以下问题。我不知道我认为使用的解决方案是否正确，或者是否有更好的解决方案。
基本上，我有一个名为 order-manager.component 的组件，它是呈现此表的父组件：
此父组件包含代表单行的对象列表：
orders: any[];
并进入 ngOnInit（），使用服务检索列表。
您可以在上一个打印屏幕中看到，可以扩展表格的每一行，以显示/编辑特定对象的详细信息。
为此，我使用了一个名为 order-details 的子组件。所以基本上在我的父组件HTML中，我有这样的东西：
DETTAGLIO ORDINE此 order-details 子组件本身具有2个子组件：一个用于查看模式，另一个用于编辑模式（在上一个屏幕截图）。
基本上，在我的 order-details 组件代码中，我简单地拥有：
<p-selectButton [options]="editOrderOption"
[(ngModel)]="editOrderSelectedOption"
(onChange)="editOrderOptionOnChange($event,orderDetail.id)"></p-selectButton>
<div *ngIf="editOrderSelectedOption=='view';then view_content else edit_content">here is ignored</div>
<ng-template #view_content>
<app-view-order [orderDetail]="orderDetail"></app-view-order>
</ng-template>
<ng-template #edit_content>
<app-update-order [orderDetail]="orderDetail"></app-update-order>
</ng-template>
基本上，用户通过选择按钮选择视图或编辑模式，然后在页面中呈现一个子组件。
在特定情况下，我们使用此更新顺序组件进入编辑模式。
如上图所示，此更新顺序组件允许用户编辑表单，最后包含删除按钮。单击此按钮，我想从我的表中删除代表该顺序（表的这一行）的对象。
这是我的问题。代表表行的对象列表在第一个 order-manager.component 父组件中定义，而按钮在第二个 update-order 子组件中定义，是层次结构：
order-manager component
|
|
|---------> order-details component
|
|
|----------------> update-order component
为了解决这个问题，我想我可以做这样的事情：
-
用户单击定义在更新顺序子组件中的删除按钮。这可以通过一种方法来处理，该方法发出一个包含当前行ID（它是object字段的唯一值）的事件。
-
进入 order-manager 父组件，我监听此事件。收到事件后，该事件将从代表我的表的行列表的 orders 列表中删除。
您认为实现此任务是一个不错的解决方案吗？还是我错过了一些东西，还有更好的解决方案？
解决方法
发送值即可。
一个更简单的解决方案是创建一个可以跟踪用户操作的服务。
创建一个服务说OrderChangeService并将其注入order-manager component和update-order component
export class OrderChangeService {
deleteIdSubject$ = new Subject<number>(); // import { Subject } from rxjs
deleteIdAction$ = deleteIdSubject$.asObservable()
}
现在update-order component中，当用户单击以删除特定订单时，您可以在主题上调用next（）函数
deleteOrder(id: number) {
deleteIdSubject$.next(id);
}
现在，您可以在订单管理器组件的deleteIdAction$函数中订阅ngOnInit()
deleteIdAction$ = this.orderChangeService.deleteIdAction$ // make sure you inject service in the constructor
ngOnInit() {
this.deleteIdAction$.subscribe({
next: (id) => {
// Do Delete action for item with id
}
})
}
基本思想是，可以使用服务将信息从一个组件传递到另一个组件。随着嵌套组件深度的增加，发射值可能会出现问题
最佳方法实际上是使用NgRx进行状态管理。可能有点难以使用，但会产生更好的结果。您可以看看official documentation of NgRx
相反，您可以创建一个数据服务来更新和通过它获取数据
import { Injectable } from '@angular/core';
import { Subject,Observable } from 'rxjs';
@Injectable()
export class MessageService {
private siblingMsg = new Subject<string>();
constructor() { }
/*
* @return {Observable<string>} : siblingMsg
*/
public getMessage(): Observable<string> {
return this.siblingMsg.asObservable();
}
/*
* @param {string} message : siblingMsg
*/
public updateMessage(message: string): void {
this.siblingMsg.next(message);
}
}
，然后从组件中，可以使用subscription设置值。
import { Component,OnInit,OnDestroy } from '@angular/core';
import { MessageService } from './message.service';
...
export class AppComponent implements OnInit{
public messageForSibling: string;
public subscription: Subscription;
constructor(
private msgservice: MessageService // inject service
) {}
public ngOnDestroy(): void {
this.subscription.unsubscribe(); // onDestroy cancels the subscribe request
}
public ngOnInit(): void {
// set subscribe to message service
this.subscription = this.messageService.getMessage().subscribe(msg => this.messageForSibling = msg);
}
}
首先，您应该在子组件中创建一个输出属性。
@Output()
updated = new EventEmitter<boolean>();
saveButtonClicked() {
//do update
this.updated.emit(true); //update success
}
在您的html中定义它：
<ng-template #edit_content>
<app-update-order [orderDetail]="orderDetail" (updated)="orderUpdated($event)"></app-update-order>
</ng-template>
现在，您可以在父组件中监听更新事件了。
orderUpdated(updated:boolean){
if(updated){
}
}
您可以找到有关组件交互here
的更多信息版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。