Html 如何在彼此不直接链接的角度组件之间共享数据?
我正在构建一个有角度的应用程序。我通过单击事件从第一个组件导航到第二个组件。在导航到第二个组件时,我将把一些数据从第一个组件传递到第二个组件。我已经按照一个教程来实现这一点,但无法做到。下面是我的代码 第一部分Html 如何在彼此不直接链接的角度组件之间共享数据?,html,angular,components,Html,Angular,Components,我正在构建一个有角度的应用程序。我通过单击事件从第一个组件导航到第二个组件。在导航到第二个组件时,我将把一些数据从第一个组件传递到第二个组件。我已经按照一个教程来实现这一点,但无法做到。下面是我的代码 第一部分 export class FirstComponent implements OnInit { @Output() messageEvent = new EventEmitter<string>(); constructor(){ } ngOnInit() {} s
export class FirstComponent implements OnInit {
@Output() messageEvent = new EventEmitter<string>();
constructor(){
}
ngOnInit() {}
sendMessagetoSecond(ahu) {
this.messageEvent.emit(ahu)
console.log(ahu)
}
ahu : string
receiveMessage($event) {
this.ahu = $event
}
第二个组件.html
<body>
<app-first (messageEvent)="receiveMessage($event)"></app-first>
ahu: {{ahu}}
<div>
....
</div>
</body>
ahu:{{ahu}
....
这就是我试过的。我面临的问题是:1-变量未传输到第二个组件
第一个组件的2-HTML也正在加载到第二个组件中。
我有什么遗漏或做错的吗?
在这里,在app.component.ts的构造函数中,给test.service中的变量赋值,然后将该值赋给view component.component.ts中的变量。方法是使用可观察值。您可以根据需要使用主题或行为主题。然后,您可以从另一个组件订阅并相应地操作
@Injectable({ providedIn: 'root' })
导出类消息服务{
私有主体=新主体()
对于装饰部分,我们可以做以下工作:
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();
}
}
这些只是示例代码,您可以根据需要添加多个订阅。您可以使用共享服务在组件之间传递数据。当您拥有随时间变化的数据时,RxJS BehaviorSubject在这种情况下将非常有用。它将确保组件始终接收最新的数据 为此, 您首先需要创建一个服务,在其中添加一个私有的BehaviorSubject,它将保存您希望在组件之间共享的消息的当前值。还有两种方法,一种是将当前数据流作为组件将使用的可观察对象来处理,另一种是更新消息的值 data.service.ts
希望这能对您有所帮助。在
接收消息
功能中,如果您控制台.log($event)
,您会看到什么?为什么ypu的区域组件上有一个[routerLink]=“['/secondComponent']”?从sendMessageToSecond方法中删除routerLink和路由(在发出之后)->this.router.navigate(['/secondComponent']);用于在同级或不相关组件之间传输数据,请使用服务和可观察项。如果字符串长度不大,可以直接通过路由传递该字符串,如果不希望其他人看到该字符串,请对其进行加密并传入路由
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();
}
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)
}
}
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")
}
}
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)
}
}