组件通过<router-outlet>进行通信

Question

我有一个根组件,它有一个改变的布尔值,我想订阅那个改变的布尔值,我的组件<router-outlet>.我知道我需要使用某种类型的共享双向服务.但是,共享服务的文档对我来说并不是很有意义.(我想我无法绕过宇航员的例子)在这里,任何帮助都会非常感激,这里有一些代码来展示我想要做的事情.

根组件

@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
  }

Answer 1

这正是他们在Angular2 Docs中所说的:

• 使用Observable创建服务

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

• 从一个组件,您将数据更新到服务

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

防爆.

服务 :

@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 ]
})

一个完整的工作示例可以在这里找到:http: //plnkr.co/edit/nJVC36y5TIGoXEfTkIp9？p = preview

PS:这是通过Service在Angular2中进行通信的方式,如果你的组件通过路由器在路由器插座内部并不重要,它可以在任何地方工作.