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數據與數據從服務

回答

相關問題