[英]Angular2 Data binding with data from service
我有這個組件
@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在service roomService上調用方法-> roomService發出事件(是公共的)-> appComponent偵聽此事件(.subscribe)
我不知道為什么這不起作用。 <h3>
從不顯示..即使console.log(room)在控制台中顯示了某些內容...
此數據綁定如何工作? 因為它看起來像數據不是雙向綁定的 ...
編輯:我了解問題,這與我所做的路由有關。 實際上,我不了解以下事實:更改路線時會破壞路線的組成部分
我想你需要訂閱
return this.http.get(this.route_room)
.map(res => res.json())
.do(data => {
this.roomSelected$.emit(data);
})
.subscribe(value => {})
.catch(this.handleError);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.