通过< router-outlet>组件通信. [英] components communication through <router-outlet>

问题描述

我有一个具有更改的布尔值的根组件，我想在我的<router-outlet>中使用该组件来订阅该更改的布尔值.我了解我需要使用某种共享的双向服务.但是，共享服务文档对我来说意义不大. (我想我无法围绕宇航员的例子)

I have a root component that has a changing boolean and I want to subscribe to that changing boolean, with a component within my <router-outlet>. I understand I need to use a shared bidirectional service of some sort. However, the docs for shared services just arent making a whole lot of sense to me. (I guess I cant wrap my head around the astronaut example) here, any help would be greatly appreciated, here is a little bit of code to show what I am trying to do.

根组件

@Component({
   selector: 'my-app',
   template: `<nav [state]="boolshow"  (show)="changeValue($event)" ></nav> 
          <article><router-outlet></router-outlet></article>  <-----component in router here
          <footer></footer>
          <h3>toggle state: {{boolshow}}</h3>`,
   styleUrls: ['./Css/app.css'],

   })
 export class AppComponent {
   boolshow: boolean;      <-----boolean that needs to be read
  }

推荐答案

使用可观察的方式创建服务

• Create a Service with an Observable

在两个组件中注入相同的服务

Inject the same Service in both components

从一个组件中将数据更新到服务

From one component you update the data to the Service

从其他组件中读取服务中的数据

From the other component you read the data from the Service

例如.

服务:

@Injectable()
export class DataService {
    private dataObs$ = new Subject();

    getData() {
        return this.dataObs$;
    }

    updateData(data: boolean) {
        this.dataObs$.next(data);
    }
}

组件:

@Component({
  selector: 'my-app',
  template: `<div (click)="updateData(false)">Click t oupdate Data FALSE</div>
             <div (click)="updateData(true)">Click to update Data TRUE</div>
            <child></child>
            `
})
export class AppComponent {
    constructor(private dataService: DataService) {}

    updateData(value: boolean) {
      this.dataService.updateData(value);
    }
}


@Component({
  selector: 'child',
  template: `<div><p>data from Service HERE:</p><p style="color:red"> {{myData}}</p></div>`
})
export class ChildComponent {
    myData: boolean;

    constructor(private dataService: DataService) {}

    ngOnInit() {
      this.dataService.getData().subscribe(data => {
        this.myData = data;
      })
    }
}

确保在组件(Singleton)中注入了相同的服务:

@NgModule({
  imports:      [ BrowserModule, HttpModule ],
  declarations: [ AppComponent, ChildComponent ],
  providers: [ DataService ],
  bootstrap:    [ AppComponent ]
})

可以在 HERE 中找到完整的示例: http://plnkr.co/edit/nJVC36y5TIGoXEfTkIp9?p=preview

A full working example can be found HERE : http://plnkr.co/edit/nJVC36y5TIGoXEfTkIp9?p=preview

PS:这就是通过Service在Angular2中进行通信的方式，无论您的组件是否位于通过路由器的路由器出口内，它都可以在任何地方使用.

PS: This is how the communication via Service works in Angular2, it doesn't matter if your component is inside a router-outlet via a router, it works everywhere.

这篇关于通过< router-outlet>组件通信.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！