Question

以下是该方案：

app.component.html获得了主要布局; 说你顶部有一个红色标题头，然后你左边有一个TOGGLING-ORANGE-SIDENAV，右边有一个STEADY-GREEN-SIDENAV。（颜色仅供参考，使我的问题更容易理解。）

总而言之，app.component.html也有<router-outlet></router-outlet>，那就是容纳其他组件＆＃39; HTML。咄！

好的......我已经完成了这个场景。到目前为止，它只是一个普通的设置。

这是我心中的复杂问题和我的问题：

说，点击RED-STICKY-HEADER上的链接，这会将组件X的HTML放在中间。

您是否有可能点击组件X的html上的某些内容，这会对GREEN SIDENAV内容进行更新？请注意，在这里，URL不会更改，不会发生重新加载，并且唯一发生的事情是绿色sidenav内容更改为其他内容。（这可能是一个HTTP get请求结果被转储到那里，但这没关系。）问题的笑话是可以从另一个组件中改变属于app.component.html的区域吗？

如果可以，那么我也会问我是否也可以通过单击RED STICKY HEADER上的链接来触发组件X方法。

换句话说，当您使用app.component.html网址时，是否可以访问和触发组件X的方法？

Answer 1

是的，这是可能的。您可以为RED-STICKY-HEADER的组件和中间组件编写公共服务，然后将更新变量作为公共服务中的可观察变量。请参阅代码，在服务中创建一个observable对象/列表。

 @Injectable()
 export class CommonService {
     aListWhichIsSubscribedByRedStickyHeader: Array<YourObject>;
     private subject = new Subject<Array<YourObject>>();

     // this is the method used to get the observable property
     getSubscribedVariables() {
         return this.subject.asObservable();
     }

     aMethodCalledByAnotherComponent(){
       /*modyfying the aListWhichIsSubscribedByRedStickyHeader
       property . Just assume that your middle component is calling this 
       method to save the object received from hhtp get request*/
     }

   this.subject.next(this.aListWhichIsSubscribedByRedStickyHeader); // so it will reflect in RedStickyHeader component's constructor.
 }

您将如何订阅它？参考下面的代码

  export class RedStickyComponent implements OnInit{

     aObjectList : Array<YourObject>;
     constructor(serviceCommon : CommonService){
        this.serviceCommon.getSubscribedVariables().subscribe(e => {
        let list = e;
        this.aObjectList = JSON.parse(JSON.stringify(list));
        })
     }

  }

所以在这个RedStickyHeader组件中，无论你在哪里使用aObjectList，你都会得到更改。或者通过分析对象，您可以更改此组件内的任何内容，或者您可以从中调用其他服务。

如何在Angular 4 +中访问另一个组件的方法和html区域？

1 个答案: