通过<router-outlet>组件通信

我有一个根组件，它有一个不断变化的布尔值，我想订阅那个不断变化的布尔值，使用我的<router-outlet>中的一个组件。我知道我需要使用某种共享的双向服务。但是，共享服务的文档并没有对我有很大的意义。（我想我无法绕着宇航员的例子包裹我的头）here，任何帮助将不胜感激，这里有一点代码来展示我正在尝试做什么。通过<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 
    }

来源

2016-10-03 Bean0341

如果您的应用程序状态树不适合您的组件树，那么http://redux.js.org/可以提供帮助。只是一个建议 – mfrachet

您可以将AppComponent实例注入到路由组件并使用其属性。但这是一个糟糕的做法。你不能通过输入来传递'boolshow'来路由组件。这是因为共享服务是推荐的方式。 – estus

这正是他们在Angular2 Docs是怎么说的：

创建一个可观察
服务注入相同服务的两个组件
从一个组件将数据更新到服务
从你的服务

防爆读取数据的其他组件。

的服务：

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

确保在组件注入相同的服务（辛格尔顿）：

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

一个完整的工作示例可以发现HERE： http://plnkr.co/edit/nJVC36y5TIGoXEfTkIp9?p=preview

PS：这是一个通过服务的通信如何Angular2工作，它不一样，如果你的组件通过路由器是路由器出口内部关系，它的工作原理到处。

来源

2016-10-03 15:26:54 tibbus

这很容易理解，而且我的服务正常工作。谢谢！ – Bean0341

如果我们想要在组件中调用某个方法时更新其他同级组件中的变量，那么我使用EventEmitter完成了这项工作，但是这对于routerOutlet无效，那么如何使用service立即更新其他组件中的数据？ – 100rabh

这是一样的，与本例中的服务和观察者进行沟通 – tibbus

通过<router-outlet>组件通信

回答

相关问题