Odśwież komponent w kanciastym 2

Question

Jestem dość nowy na kątowe 2 i próbuję dowiedzieć się więcej na ten temat.

Moje pytanie brzmi: Jak odświeżyć składnik (ponownie wywołać ngOnInit).

Ten komponent będzie wywoływał interfejs API w celu pobrania niektórych danych z bazy danych. a jeśli kliknięty zostanie przycisk, żądanie PUT zostanie wysłane do API, aby zaktualizować dane w bazie danych. Ponieważ zmiana zachodzi w bazie danych zamiast samego komponentu, nie sądzę, aby metoda ngOnChange lub inna metoda sprawdzania zmian działała. Tutaj staram się ponownie wywołać ngOnInit, aby komponent mógł otrzymywać zaktualizowane dane.

Próbowałem router nagivate, aby odświeżyć tę stronę, ale to nie działa.

Cała metoda HTTP dzieje się w innym pliku usługi, nie będę ich tu wyświetlał, ponieważ nie jest to istotne.

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(); 
    } 

Każda odpowiedź będzie mile widziane, zawsze jestem szczęśliwy, aby dowiedzieć się więcej.

Answer 1

Spróbuj wywołać metodę this.fetchData() po rozwiązaniu połączenia z zapleczem. Coś jak:

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]; 
    } 


    }