angular - 基于输入在组件之间传递信息

问题描述

我如何以一种方式实现这一点，即组件 1 或 2 上的所有值都被更改，另一个组件上的值被更新，使用服务！。我知道如何使用输出和输入来完成这项工作，但是使用我被卡住的服务。我实际上想实现比这里显示的更强大的东西，但首先我需要了解输入交互的部分。如果那是一次点击，很容易，只要点击按钮，就将信息发送到服务、更新并发送给它的订阅者。但是有了输入，我找不到一种方法来完成这项工作。谢谢你的帮助。此外，如果有任何关于理解输入元素背后的逻辑的建议，我会非常高兴。就像，我能读到的任何东西。

组件 1

import { Component, OnInit} from '@angular/core';
import { BehaviorServiceService } from '../service/behavior-service.service';

@Component({
  selector: 'app-childtwo',
  templateUrl: './childtwo.component.html',
  styleUrls: ['./childtwo.component.css']
})
export class ChildtwoComponent implements OnInit  {

  constructor(private behaviorService: BehaviorServiceService) { }
  data;
  ngOnInit() {
    this.behaviorService.currentMessage
      .subscribe((message)=>{
        this.data = message
      })
  }
}

组件 2

import { Component, OnInit } from '@angular/core';
import { BehaviorServiceService } from '../service/behavior-service.service';

@Component({
  selector: 'app-childone',
  templateUrl: './childone.component.html',
  styleUrls: ['./childone.component.css']
})
export class ChildoneComponent implements OnInit {

  constructor(private behaviorService: BehaviorServiceService) { }
  data;
  ngOnInit() {
    this.behaviorService.currentMessage
      .subscribe((message)=>{
        this.data = message
      })
  }

}

服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { BehaviorSubject } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class BehaviorServiceService {

  private messageSource = new BehaviorSubject('string')
  currentMessage = this.messageSource.asObservable()

  constructor(private http: HttpClient){

  }

  changeMessage(message){
    this.messageSource.next(message)
  }



}

标签： angulartypescriptbehaviorsubject

angular - 基于输入在组件之间传递信息

问题描述

解决方案

推荐阅读