以角度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];
  }


  }