Question

我目前处于这样一种情况：我有3个不同的组件，其中一个在两个组件之间共享，如果我从两个组件中的任何一个更新共享组件，我希望它们在这两个组件上都得到更新是有办法吗？

IST-成分

       import {Component,bind,CORE_DIRECTIVES,OnInit} from 'angular2/core';
import {MainComponent} from 'src/MainComponent';
@Component({
    selector: 'my-app',
    directives:[MainComponent],
    template: `<h1>AppComponent {{onMain}}</h1>
    <div *ngIf="onMain == false">
       Hello
      <br> __________________________________<br>
    </div>
     <app-share></app-share>


    })

export class FirstComponent implements OnInit {}

第二组分

          import {Component,bind,CORE_DIRECTIVES} from 'angular2/core';
    import {SharedService} from 'src/shared.service';
    @Component({
        selector: 'sec-app',

        template: `<app-share></app-share>
                  <button (click)='changeCount()'></button>
`
    })

    export class SecondComponent {



        constructor(ss: SharedService) {
          this.ss = ss;
        }

        changeCount() {
          //want to change the count of shared component and also want a sync in first componen
        }
    }

共享组分

      import {Component,bind,CORE_DIRECTIVES} from 'angular2/core';
@Component({
    selector: 'app-share',

    template: `{{count}}`
})

export class ShareComponent {

   count:any;

}

现在两个组件都在不同的路径上加载，即带有两个选项卡的浏览器，一个选项卡有第一个组件，第二个选项卡有第二个组件，所以现在我想在两个组件之间进行同步，如果我更新第二个组件它必须反思第一个

Answer 1

使用其他两个组件中的“共享组件”只会共享代码，而不是数据。即将创建两个“共享组件”实例，每个实例都有自己的一组变量。因此，对一个组件中的数据的更新不会反映在另一个组件中。这是设计的。

如果您需要在任何两个组件之间共享数据，则需要使用Observables。您需要通过声明Observable来创建将拥有共享数据的服务。需要访问该共享数据的所有其他组件必须订阅服务中的observable。

如何在angular2中的两个浏览器标签之间同步数据？

1 个答案: