2017-04-23 79 views
0

我有兩個共享服務的組件,第一個組件具有2個按鈕,它們在點擊squeezeContent()unsqueezeContent()時觸發2個方法,這些方法將一個數值傳遞給服務中的observable,然後將這個值從屬性中減去在共享相同服務的另一個組件,我一直在試圖找出使用可觀察到的,但我沒有這樣做是正確通過在角度上可觀察地更改組件的屬性值2

第一部分

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core'; 
import { CrosspropertiesService } from "../services/crossproperties.service"; 
@Component({ 
    selector: 'app-timer', 
    templateUrl: './timer.component.html', 
    styleUrls: ['./timer.component.css'] 
}) 
export class TimerComponent implements AfterViewInit { 
    @ViewChild('timerBody') timerBody:ElementRef; 
    constructor(private crossproperties: CrosspropertiesService) { } 
     public timerBodyHeight:number; 
     ngAfterViewInit() { 
      this.timerBodyHeight = this.timerBody.nativeElement.offsetHeight; 
     } 
     squeezeContent(){ 
      this.crossproperties.resizeHeight(this.timerBodyHeight); 
     } 
     unsqueezeContent(){ 
      this.crossproperties.resizeHeight(0); 
     } 
} 

和服務文件

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs'; 
import { Subject } from 'rxjs/Subject'; 
@Injectable() 
export class CrosspropertiesService { 
    private subject = new Subject<any>(); 

    resizeHeight(height:number){ 
    this.subject.next({ value: height }); 
    } 
    getSidebarScrollHeight(): Observable<any>{ 
    return this.subject.asObservable(); 
    } 
    constructor() { } 
} 

第二組分

import { Component, OnInit , OnDestroy, ElementRef, ViewChild} from '@angular/core'; 
import { CrosspropertiesService } from '../services/crossproperties.service'; 
import { Subscription } from 'rxjs/Subscription'; 
@Component({ 
    selector: 'app-sidebar-expanded', 
    templateUrl: './sidebar-expanded.component.html', 
    styleUrls: ['./sidebar-expanded.component.css'] 
}) 
export class SidebarExpandedComponent implements OnInit { 
    subscription:Subscription; 
    private sidebarscrollheight:number; 
    constructor(private crossproperty: CrosspropertiesService) { 
    this.subscription = this.crossproperty.getSidebarScrollHeight().subscribe(height => { this.sidebarscrollheight = this.sidebarscrollheight - height; }); 
    } 
    ngOnInit() { 
    this.sidebarscrollheight = 600; //computed value in this section 
    } 
} 

現在我想要被改變的sidebarscrollheight屬性值時squeezeContent()和unsqueezeContent()方法在部件1個通話在服務中的功能,sidebarscrollheight屬性已經有一些計算值,請任何幫助

回答