角度2のコンポーネントをリフレッシュする

Question

2番めの角度にかなり新しいので、詳細を知ろうとしています。

私の質問はここにあります：コンポーネントをリフレッシュするにはどうすればいいですか（ngOnInitの再呼び出し）。

このコンポーネントは、データベースからデータを取得するAPIを呼び出します。ボタンがクリックされた場合は、PUTリクエストがAPIに送信され、データベース内のデータが更新されます。 変更はコンポーネント自体ではなくデータベースで行われるため、ngOnChangeや他のチェンジチェックメソッドはで動作するとは思われません。ここでは、コンポーネントが更新されたデータを受け取れるようにngOnInitを再度呼び出そうとしています。

私はこのページを更新するためにルータのnagivateを試しましたが、動作しません。

すべてのHTTPメソッドは別のサービスファイルで行われますが、関係のないのでここでは表示しません。

app.module.ts

@NgModule({ 
    imports: [ 
     RouterModule.forRoot([{path: 'data', component: DataComponent}]); 
    ] 
}) 

data.component.ts

@Component({ 
    template: ` 
     <button (click)= "onclick()">Click Me</button> 
    `, 
    .... 
}); 

export class DataComponent implements OnInit{ 
    fetchData(): void{ 
     this.dataService.dataSessions().subscribe(
       data => this.data= data, 
       error=> console.error(error), 
       ()=> {} 
     ); 
    } 

    onclick(){ 
     this.dataChangeService.updateData().subscribe(response=> console.log(response)); 
     this.router.navigate['/data']; 
    } 

    ngOnInit(): void{ 
     this.fetchData(); 
    } 

任意の答えは、私はいつもより多くを学ぶことが幸せです、理解されるであろう。

Answer 1

バックエンドへの呼び出しが解決されたらthis.fetchData（）メソッドを呼び出してみてください。ような何か：

response=> { this.fetchData() ... 

Answer 2

import { Component, OnInit, Inject,OnChanges } from "@angular/core"; 
import { ProductService } from '../../services/product.service'; 
import 'rxjs/Rx'; 
import { ActivatedRoute, Router,NavigationEnd } from '@angular/router' 
import { JQ_TOKEN } from '../../common/index' 

@Component({ 
    selector: 'product-list', 
    templateUrl: 'app/store/product_list/product-list.component.html', 
    styleUrls: ['app/store/product_list/css/style.css'] 
}) 
export class ProductListComponent implements OnInit { 
    products:any 
    productcount : any 
    sub:any; 
    constructor(private productService:ProductService,private route:ActivatedRoute,@Inject(JQ_TOKEN) private $:any,private router:Router)  { 

    } 


    ngOnInit() { 
this.productService.getProduct(this.route.snapshot.params['productcategory']).map(product=>this.products) 
    this.products = this.route.snapshot.data['products'] 
    this.productcount=+this.products.length; 

this.sub = this.route.params.subscribe(params => { 
     this.paramsChanged(params['productcategory']); 
     }); 
    } 
    paramsChanged(productcategory:string) 
    { 

     this.products = this.route.snapshot.data['products'] 
     this.productcount=+this.products.length; 
    console.log('product list paramsChanged' + productcategory); 

    this.router.navigate['/store/'+productcategory]; 
    } 


    }