angular - 如何在 Angular 6/5/4 中没有父子关系的情况下将组件 A 之间的数据传递给组件 B
问题描述
我不知道如何在 angular 6 中的两个组件之间传递数据或变量,我接受任何建议,请帮助我
解决方案
Jeff Delaney编写的本教程提供了您所需的解决方案 。
不相关的组件:与服务共享数据
在缺少直接连接的组件之间传递数据时,例如兄弟姐妹、孙辈等,您应该使用共享服务。当你有应该同步的数据时,我发现 RxJS BehaviorSubject 在这种情况下非常有用。
您还可以使用常规的 RxJS 主题通过服务共享数据,但这就是我更喜欢 BehaviorSubject 的原因。
- 它将始终返回订阅的当前值 - 无需调用 onnext
- 它有一个 getValue() 函数来提取最后一个值作为原始数据。
- 它确保组件始终接收最新数据
在服务中,我们创建一个私有的 BehaviorSubject 来保存消息的当前值。我们定义了一个 currentMessage 变量,将这个数据流作为一个 observable 来处理,供组件使用。最后,我们创建函数调用 BehaviorSubject 上的 next 以更改其值。
父组件、子组件和兄弟组件都接受相同的处理。我们在构造函数中注入 DataService,然后订阅 currentMessage observable 并将其值设置为等于 message 变量。
现在,如果我们在这些组件中的任何一个中创建一个函数来更改消息的值。当执行此函数时,新数据会自动广播到所有其他组件。
数据服务.ts:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class DataService {
private messageSource = new BehaviorSubject('default message');
currentMessage = this.messageSource.asObservable();
constructor() { }
changeMessage(message: string) {
this.messageSource.next(message)
}
}
父组件.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
selector: 'app-parent',
template: `
{{message}}
`,
styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
}
兄弟组件.ts:
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
selector: 'app-sibling',
template: `
{{message}}
<button (click)="newMessage()">New Message</button>
`,
styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
newMessage() {
this.data.changeMessage("Hello from Sibling")
}
}
推荐阅读
- javascript - 仅使用 JavaScript 和 CSS 文本从左到右淡入淡出
- ios - 如何在表格视图的每个单元格下添加行?
- reactjs - 如何更新 ReactJS 中的上下文变量?
- sql - 查询以计算超过 24 小时间隔的时间总和
- visual-studio-code - 终端进程启动失败:启动过程中发生本机异常(无法启动终端进程:CreateProcess失败)
- javascript - TypeError:“编译”参数必须是编译的实例
- c - 头文件中的 C 函数实现
- .htaccess - htaccess 301 将根目录重定向到子目录
- java - java中的YAML验证失败
- laravel - 如何使用 laravel 迁移在 mysql 8 中设置 json 列的索引