Question

当我至少两次访问列表页面时，我遇到了Angular 6的问题。

在此列表页面中，我将信息添加到表中

<table id="table-products" class="wb-tables table table-striped table-hover" data-wb-tables='{ "ordering" : false }'>
<thead>
  <tr>
    <th>Id</th>
    <th>Title</th>
  </tr>
</thead>    
<tbody>
  <tr *ngFor="let product of products">
    <td>{{product.id}}</td>
    <td><a routerLink="{{product.routerLink}}">{{product.title}}</a></td>
  </tr>
</tbody>

信息将像这样被加载到后端：

  ngOnInit() {
    this.productService.getAll().subscribe( (products: IProduct[]) => {
      this.products = products;
      this.products.map(p => p.routerLink = ['../' + p.id]);
    });
  }

初始化组件的视图时，我还必须调用一些javascript

ngAfterViewInit() {
  if (wb.isReady) {

    setTimeout(() => {
      $('.wb-tables:not(.wb-tables-inited)').trigger('wb-init.wb-tables');
    }, 0);
  }
}

无论我在浏览器中输入url还是从其他组件进行导航，此方法在第一次加载时都效果很好。但是，当我第二次从正常的路由器链接导航中恢复过来时，我遇到了一个问题，即JavaScript无法正确初始化数据表。

似乎它缓存了组件？尽管在所有调用中都会调用构造函数和ngOnInit ...

我已经尝试添加自定义重用策略，但是这种方法不起作用...

export class ProductsRouteReuseStrategyService implements RouteReuseStrategy {
  shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; }
  store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {}
  shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; }
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle|null { return null; }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return false;
  }
}

有什么想法吗？

强制Angular 6永远不要重用组件

0 个答案: