没有子/父关系的其他组件的Angular5操作HTML [英] Angular5 manipulation Html of other component without having child/parent relation

问题描述

对于我的应用程序，我必须与2个组件进行通信，但是这些组件没有父子关系。

我使用服务来设置此通信。当我单击component1上的按钮时，我会在compenent2中触发一个函数。通常，当我从component2触发它时，此函数会在component2的html中进行更改。但是，当我从component1触发它时，什么也没有发生。

THx很多！

=

解决方案

据我所知，您的服务通信肯定存在问题，对我来说很好。
确保在要接收任何值的组件的构造函数中订阅了该服务。
您的情况是

 从 rxjs导入{Subject，Observable of}； 
服务代码：
 public methodForRender = new Subject< any>（）; 
 renderMe = this.methodForRender.asObservable（）; 
 callMethodToRender（value）{
 this.methodForRender.next（value）; 
} 
 
组件1的代码：这是触发功能！ 
 
构造函数（私人调用桥：SharedService）{} 
 this.callingBridge.callMethodToRender（this.value）; 
 
组件2的代码：应订阅服务
 
构造函数（私有调用桥：SharedService）{} 
 this.callingBridge.renderMe.subscribe（
（value）=> {
 //做您的事情//在此处调用函数以呈现html 
} 
）; 
  

我希望它会对您有所帮助！

For my application I have to communicate with 2 components but these components don`t have a parent child relation.

I use a service to set up this comminication. When I click on the button on of component1 I trigger a function in compenent2. Normaly this function makes a change in the html of component2 when i trigger it from component2. But when I trigger it from component1 nothing happens. Is there a way to reload/update the HTML when component1 triggers the function in component2?

THx a lot!

解决方案

There must be issue with your service communication, as far as I have used it, worked fine for me. Make sure you subscribe to the service in constructor of component in which you want to receive any value. In your case,

 import { Subject,Observable, of } from 'rxjs';
 code for service :
   public methodForRender = new Subject<any>();
   renderMe = this.methodForRender.asObservable();
   callMethodToRender(value) {
    this.methodForRender.next(value);
   }

 code for component 1 :  which is triggering function!

   constructor(private callingBridge: SharedService) {}
   this.callingBridge.callMethodToRender(this.value);

 code for component 2 :  which should be subscribed to service 

    constructor(private callingBridge: SharedService) {}
    this.callingBridge.renderMe.subscribe(
     (value) => {
        // do your stuff // call your function here to render html
       }
    );    

I hope it will help you!

这篇关于没有子/父关系的其他组件的Angular5操作HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！