cvg*_*cvg 1 html components angular
我正在构建一个有角度的应用程序。我通过单击事件从第一个组件导航到第二个组件。在导航到第二个组件时，我愿意将一些数据从第一个组件传递到第二个组件。我已按照教程来实现此目的，但无法做到。下面是我的代码
第一个组件.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 也被加载到第二个组件中。
我是否遗漏或做错了什么？
小智 5
您可以使用共享服务在组件之间传递数据。当您的数据随时间变化时，RxJS BehaviourSubject 在这种情况下将非常有用。它将确保组件始终接收最新的数据。
为此，
您首先需要创建一个服务，在其中添加一个私有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)
}
}
希望这可以帮助你。
| 归档时间： |
|
| 查看次数： |
2162 次 |
| 最近记录： |