我正在做一个带有嵌套多个组件的 Angular2 项目。我设法将一些数据从直接子组件发送到直接父组件。但是对于 3 个嵌套组件,如何更改数据或将数据发送到多个父组件?
例如,在下图中,1号是消息中心组件。 2 号是消息列表组件,通过选择器 < message-list [messageList]="mails"> 从 1 号组件的 html 中调用。
No 3 是一个消息详细信息组件,其父级为 No 2。现在,在 No 3 组件中,如果我们从收件箱中删除一条选定的消息,则该消息也将从 2 号和 No 1 中的消息列表组件中删除组件中,标记为 no 的“已删除”也将更改为“已删除(1)”。现在我们如何更改第 3 级嵌套子组件中的更改事件的多个父组件?
最佳答案
您可以使用BehaviorSubject例如,在消息服务的服务中(如果您满足以下条件,请不要忘记添加 do
rxjs 运算符:
@Injectable()
export class MessageService {
public $messages: BehaviorSubject<Message[]> = new BehaviorSubject<Message[]>([]);
public getMessages() {
const url = 'your url';
return this.http.get(url).do(messages => this.$messages.next(messages));
}
}
然后要访问组件中的数据,注入(inject)服务并使用如下方法:
msgService.$messages.subscribe(messages => this.messages = messages); // update data each time next is called
msgService.getMessages().subscribe(); // do the http call
然后,当您删除消息时,您只需使用 next 更新列表:
const newList = this.messages.filter(message => message.id !== deletedMessage.id);
msgService.$messages.next(newList);
它会自动更新数据。 我希望它有帮助。
关于javascript - Angular2中嵌套多个组件之间的通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51187681/