[英]How to share data between angular components which are not directly linked with each other?
我正在构建一个角度应用程序。 我正在通过单击事件从第一个组件导航到第二个组件。 在导航到第二个组件时,我希望将一些数据从第一个组件传递到第二个组件。 我已经按照教程来实现这一点,但无法做到。 下面是我的代码
第一个组件.ts
export class FirstComponent implements OnInit {
@Output() messageEvent = new EventEmitter<string>();
constructor(){
}
ngOnInit() {}
sendMessagetoSecond(ahu) {
this.messageEvent.emit(ahu)
console.log(ahu)
}
第一个组件.html
<map name="ahuMap">
<area shape="rect" coords="818,232,917,262" (click)="sendMessagetoSecond()" [routerLink]="['/secondComponent']">
</map>
第二个组件.ts
ahu : string
receiveMessage($event) {
this.ahu = $event
}
第二个组件.html
<body>
<app-first (messageEvent)="receiveMessage($event)"></app-first>
ahu: {{ahu}}
<div>
....
</div>
</body>
这是我尝试过的。 我面临的问题是:
1-变量没有被转移到第二个组件
第一个组件的 2-HTML 也在第二个组件中加载。
我有什么遗漏或做错了吗?
您可以使用共享服务在组件之间传递数据。 当你有随时间变化的数据时,RxJS BehaviorSubject 在这种情况下将非常有用。它将确保组件始终接收最新的数据。
为此,
您首先需要创建一个服务,您将在其中添加一个私有 BehaviorSubject,该服务将保存要在组件之间共享的消息的当前值。 以及两种方法,一种将当前数据流作为可观察对象处理,供组件使用,另一种用于更新消息的值。
数据服务.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable()
export class DataService {
private messageSource = new BehaviorSubject('default message');
constructor() {}
fetchMessage(): Observable<string> {
return this.messageSource.asObservable();
}
sendMessage(message: string) {
this.messageSource.next(message)
}
}
创建服务后,您只需将其注入组件的构造函数中,然后调用其方法 fetchMessage/sendMessage 即可获取或更改您的消息值。
因此,您可以通过以下方式将数据从父级传递给子级,例如:
父组件.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from "./data.service";
@Component({
selector: 'parent',
template: `
{{message}}
<button (click)="newMessage()">send Message</button>
`
})
export class ParentComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.fetchMessage.subscribe(message => this.message = message)
}
newMessage() {
this.data.sendMessage("Hello from Parent Component")
}
}
子组件.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from "./data.service";
@Component({
selector: 'child',
template: `
{{message}}
`
})
export class ChildComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.fetchMessage().subscribe(message => this.message = message)
}
}
希望这可以帮助你。
在这个演示中,我从 app.component.ts 传递一个值来使用 test.service 查看 component.component.ts
在这里,在 app.component.ts 的构造函数中,给 test.service 中的变量赋值,然后将该值赋给一个变量到 view component.component.ts 中。
做到这一点的方法是使用 observables。 您可以根据需要使用主题或行为主题。 然后你可以从另一个组件订阅并采取相应的行动。 所以实现如下:
@Injectable({ providedIn: 'root' })
导出类 MessageService { 私有主题 = 新主题();
sendMessage(message: string) {
this.subject.next({ text: message });
}
clearMessages() {
this.subject.next();
}
getMessage(): Observable<any> {
return this.subject.asObservable();
}
}
因此,在另一个组件中,您可以像下面这样订阅:
constructor(private messageService: MessageService) {
// subscribe to home component messages
this.subscription = this.messageService.getMessage().subscribe(message => {
if (message) {
this.messages.push(message);
} else {
// clear messages when empty message received
this.messages = [];
}
});
}
对于发射部分,我们可以在下面做:
export class HomeComponent {
constructor(private messageService: MessageService) { }
sendMessage(): void {
// send message to subscribers via observable subject
this.messageService.sendMessage('Message from Home Component to App Component!');
}
clearMessages(): void {
// clear messages
this.messageService.clearMessages();
}
}
这些只是选择的示例代码,您可以根据需要添加多个订阅。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.