無法通過服務更新組件角色的angular4視圖

您好，我正在嘗試從組件（HeaderComponent）調用另一個組件（ProductComponent）的方法。爲此我使用了一項服務。我創建了一個服務ProductService，它是這些組件中的一個共享服務。但我不更新視圖時，變量值在服務中更改請幫助。這裏是代碼無法通過服務更新組件角色的angular4視圖

productservice.service.ts

import { Injectable, ChangeDetectorRef } from '@angular/core'; 
    import { Observable } from 'rxjs'; 
    import { Subject } from 'rxjs/Subject'; 
    @Injectable() 
    export class ProductServiceService { 

    contentSource = new Subject(); 
    str = 'initial'; 
    content$ = this.contentSource.asObservable(); 
    constructor(private cdRef:ChangeDetectorRef) { } 
    setData(str){ 
     this.str = str; 
     console.log(str); 
     this.cdRef.detectChanges(); 
    } 
    getData(){ 
     return this.str; 
    } 

    }

header.component.ts

@Component({ 
    selector: 'app-header', 
    templateUrl: './header.component.html', 
    styleUrls: ['./header.component.css'], 
    providers: [ProductsComponent, ProductServiceService], 
    changeDetection: ChangeDetectionStrategy.Default 
}) 
export class HeaderComponent implements OnInit{ 

constructor(public dialog: MdDialog,private _http: Http, private cdRef:ChangeDetectorRef, private sharedService: ProductServiceService) 
{ 
}  
ngOnInit() { 
} 
    newProudutsData(slug: string){ 
    this.sharedService.contentSource.next("echo"); 
    this.sharedService.setData('Done Calling'); 
    this.cdRef.detectChanges(); 
    } 
}

product.component.ts

@Component({ 
    selector: 'app-products', 
    templateUrl: './products.component.html', 
    styleUrls: ['./products.component.css'], 
    changeDetection: ChangeDetectionStrategy.Default, 
    providers: [ProductServiceService], 
}) 
export class ProductsComponent implements OnDestroy { 
    slug=''; 
    subscription: Subscription; 
    testdata = 'abcd'; 
    constructor(private _http: Http, private sharedService: ProductServiceService) 
    { 
      this.testdata = sharedService.getData(); 
      console.log("received222"); 
    } 
    ngOnDestroy() { 
     this.subscription.unsubscribe(); 
    } 
}

我在頁面加載時得到的最終輸出是初始的，但當調用方法 newProudutsData（）時，它應該更改爲完成調用。

------ --------編輯

產物組分在頭組件中定義，通過該調用prodcut組件時路線

{ 
      path: 'products/:id', 
      component: ProductsComponent 
},

被調用。

來源

2017-09-20 Naveen Singh

顯示./products.component.html代碼 – alexKhymenko

和./products.component.html – alexKhymenko

組件有他們自己的服務，它們沒有連接。您應該將服務提取到模塊。當你指定對組件的服務時，你只需要對該組件進行本地化，這意味着你有兩個不同的服務實例，而不是一個，並且它們不互相共享數據。我recommned使用鉻的deb工具占卜看到依賴注入

@Component({ 
    selector: 'app-header', 
    templateUrl: './header.component.html', 
    styleUrls: ['./header.component.css'], 
}) 
export class HeaderComponent implements OnInit{ 

} 

@Component({ 
    selector: 'app-products', 
    templateUrl: './products.component.html', 
    styleUrls: ['./products.component.css'], 
}) 
export class ProductsComponent implements OnDestroy { 
} 

@NgModule({ 
    imports: [ 
    CommonModule 
    ], 
    declarations: [ProductsComponent , HeaderComponent ] 
    providers: [ 
    ProductServiceService 
    ] 
}) 
export class YourModule {}

使用behaviorSubject，而不是主題

contentSource = new BehaviorSubject('');

主題不保存先前的值BehaviorSubject一樣。如果源排放的東西，但你當時沒有訂閱，你會失去這個價值。

created Plunker

來源

2017-09-20 09:12:36 alexKhymenko

該服務在'在提供商陣列app.module.ts'定義。我試圖從兩個組件中刪除它們，但沒有任何工作 –

@NaveenSingh好的。他們是父母和孩子的腥臭。那麼你需要使用不是主題，但行爲主題 – alexKhymenko

@NaveenSingh更新的答案。 – alexKhymenko

無法通過服務更新組件角色的angular4視圖

回答

相關問題