Angular 通过<；路由器出口>；

我有一个根组件，它有一个变化的布尔值，我想订阅这个变化的布尔值，在我的

中有一个组件。我知道我需要使用某种共享双向服务。然而，共享服务的文档对我来说意义不大。（我想我不能把我的头绕在宇航员的例子上），任何帮助都将不胜感激，这里有一点代码来说明我正在尝试做什么

根组件

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

@组件({
选择器：“我的应用程序”，
模板：`
他们就是这么说的：


创建具有可观察属性的服务

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

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

从另一个组件读取服务中的数据


前

服务：

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

组件：

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

可以找到完整的工作示例：

PS：这就是Angular2中通过服务进行通信的方式，不管您的组件是否通过路由器位于路由器出口内，它都可以在任何地方工作。
如果您的应用程序状态树不适合您的组件树，可以提供帮助。只是一个建议，您可以将AppComponent实例注入路由组件并使用其属性。但它可以这是一个糟糕的做法。而且您不能通过输入将
boolshow
传递到路由组件。这是因为建议使用共享服务。这非常容易理解，而且我的服务工作正常。谢谢！如果我们想在组件中调用方法时更新其他同级组件中的变量，我会怎么办我们已经用EventEmitter实现了这一点，但routerOutlet无法实现这一点，那么如何使用服务来即时更新其他组件中的数据呢？这是一样的，与服务和可观察对象进行通信，如本例所示。在我的情况下，我必须从特定组件的提供者属性中删除服务。请注意，如果没有，我将不起作用。这应该作为答案示例在某些模块中注册为全局提供程序。这在angular 7中仍然有效吗？plnkr中的示例未打开