没有 child/parent 关系的其他组件的 Angular5 操作 Html

Question

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

我使用服务来设置此通信。当我点击 component1 的按钮时，我触发了 compenent2 中的一个函数。通常，当我从 component2 触发它时，此函数会更改 component2 的 html。但是当我从 component1 触发它时，什么也没有发生。当component1触发component2中的函数时，有没有办法reload/update HTML？

非常感谢！

Answer 1

你的服务通信一定有问题，据我所知，它对我来说很好用。确保在要接收任何值的组件的构造函数中订阅服务。在你的情况下，

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

希望对您有所帮助！

没有 child/parent 关系的其他组件的 Angular5 操作 Html

Angular5 manipulation Html of other component without having child/parent relation

html

communication

angular