Angular2数据与数据从服务

结合我有这个分量Angular2数据与数据从服务

@Component({ 
    templateUrl: './app/component/template/actualstate.template.html', 
    styleUrls: ['./app/component/style/actualstate.style.css'], 
    pipes: [MomentPipe, CapitalizePipe] 
}) 
export class ActualStateComponent implements OnInit { 
    public room: Room; 

    constructor(private roomService: RoomService) { 

     roomService.roomSelected$.subscribe(room => this.onRoomSelected(room)); 
    } 

    onRoomSelected(room: Room) { 
     this.room = room; 
     console.log("room", room); 
    } 
}

和这个其他组件

@Component({ 
    templateUrl: './src/admin/template/admin.template.html', 
    styleUrls: ['./src/admin/style/admin.style.css'], 
    providers: [UserService] 
}) 
export class AdminComponent{ 

    constructor (private roomService: RoomService) { 
    } 

    onClick() { 

      this.roomService.selectRoom("",""); 
      this.router.navigate(['ActualState']); 
     } 
    } 
}

，这项服务：

@Injectable()  
export class RoomService { 

    private route_room = "public/mock/room.json"; 
    public roomSelected$: EventEmitter<Room>; 

    constructor (private http: Http) { 
     this.roomSelected$ = new EventEmitter(); 
    } 



    public selectRoom (subdomain: string, id: string) { 
      // pick the right room 
      let room = ... 
      this.roomSelected$.emit(room); 

    } 

    private handleError (error: Response) { 
     return Observable.throw(error.json().error || 'Server error'); 
    } 
}

而这个模板：

<div class="actual-state" *ngIf="room"> 
<h3>Salle {{ room.name }} 
</h3> 
</div>

的目的是：管理组件（在某些按钮用户点击） - >监听器的OnClick调用服务的方法提供客房服务 - >房间服务发出的事件（即公众） - > appComponent监听此事件（。订阅）

我不知道为什么这不起作用。 <h3>永远不会显示..即使console.log（room）在控制台中显示某些内容...

这种数据绑定是如何工作的？ 因为它看起来像数据不是双向绑定 ...

编辑：我明白了这个问题，它与我所做的路由有关。 其实我did'nt明白一个事实，当你改变

来源

2016-02-22 julestruong

我猜你需要订阅

return this.http.get(this.route_room) 
        .map(res => res.json()) 
        .do(data => { 
         this.roomSelected$.emit(data); 
        }) 
        .subscribe(value => {}) 
        .catch(this.handleError);

来源

2016-02-22 15:02:52

@julestruong它实际上是比这更复杂的路线的路线的组成部分被破坏，我编辑我的代码 – julestruong

我看到了你的编辑，但不明白为什么它现在更复杂。你有没有试过我的建议？你有什么错误吗？ –

我应该在哪里订阅呢？我不在等待一个http请求被执行，我正在等待一些用户事件，在这种情况下，点击一下 – julestruong

Angular2数据与数据从服务

回答

相关问题