Question

我正在构建一个有角度的应用程序。我正在通过click事件从第一个组件导航到第二个组件。在导航到第二个组件时，我希望将一些数据从第一个组件传递到第二个组件。我遵循了一个教程来实现此目的，但无法做到。下面是我的代码

第一个component.ts

export class FirstComponent implements OnInit {

@Output() messageEvent = new EventEmitter<string>();

constructor(){
}

ngOnInit() {}


sendMessagetoSecond(ahu) {
    this.messageEvent.emit(ahu)
    console.log(ahu)
  }

first component.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也正在第二个组件中加载。
有什么我想念或做错的事吗？

Answer 1

in this demo, I am passing a value from app.component.ts to view component.component.ts using test.service

在这里，在app.component.ts的构造函数中，为test.service中的变量提供一个值，然后将该值分配给视图component.component.ts中的变量。

Answer 2

执行此操作的方法是使用可观察对象。您可以根据需要使用主题或行为主题。然后，您可以从另一个组件进行订阅并采取行动。

@Injectable({ providedIn: 'root' })

导出类MessageService { 私人主题=新Subject（）;

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();
}

}

这些只是示例代码，您可以根据需要添加多个订阅。

Answer 3

您可以使用共享服务在组件之间传递数据。当您拥有随时间变化的数据时，RxJS BehaviorSubject在这种情况下将非常有用，它将确保组件始终接收最新数据。

为此，

首先需要创建一个服务，在其中添加一个私有的BehaviorSubject，该行为将保存您要在组件之间共享的消息的当前值。还有两种方法，一种方法是将当前数据流作为可观察的方式处理，以供组件使用，另一种方法是更新消息的值。

data.service.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即可获取或更改消息值。

因此，例如，可以使用以下方法将数据从父级传递到子级：

parent.component.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")
  }

}

child.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)
  }

}

希望这对您有所帮助。

如何在不直接链接的角度分量之间共享数据？

3 个答案: