Angular2 与来自服务的数据的数据绑定答案

【问题标题】：Angular2 Data binding with data from serviceAngular2 与来自服务的数据的数据绑定
【发布时间】：2016-02-22 14:54:06
【问题描述】：

我有这个组件

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

目的是：管理组件（用户单击某个按钮） -> Listener OnClick 调用服务 roomService 上的方法 -> roomService 发出一个事件（即公开的） -> appComponent 监听这个事件（.subscribe）

我不知道为什么这不起作用。 <h3> 永远不会显示......即使 console.log(room) 在控制台中显示一些东西......

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

编辑：我理解这个问题，它与我所做的路由有关。 事实上我不明白当你改变路线时，路线的组件会被破坏

【问题讨论】：

标签： dependency-injection angular 2-way-object-databinding angular2-template angular2-services

【解决方案1】：

我猜你需要订阅

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

【讨论】：

@julestruong 实际上比这更复杂，我编辑我的代码
我看到了您的编辑，但不明白为什么它现在变得更复杂了。你试过我的建议了吗？你有什么错误吗？
那我应该在哪里订阅呢？我不是在等待执行 http 请求，而是在等待一些用户事件，在这种情况下是点击
当您的问题与您的问题无关时，this.http.get(...) 代码是什么意思？
忘记 http.get 代码，我复制粘贴了错误的代码