Angular @Input 无法在浏览器上运行，组件无法呈现

Question

在 parent 组件上，我有一个从商店获取的产品列表：

// ...
ngOnInit() {
  this.products$.subscribe(products => {
     this.products = products;
  })
}
// ...

<!-- ... -->
  <ng-container *ngIf="products">
    <product-list [products]="products"></product-list>
  </ng-container>
<!-- ... -->

然后 child product-list:

// ...
@Input() products: IProduct[];
// ...

<!-- ... -->
  <div *ngFor="let product of products">
    <product-card [product]="product">
  </div>
<!-- ... -->

比起我每个 product-card 节目 product.image.

我面临的问题是，每当我登陆此页面时，我都可以查看所有产品，但是当我单击页面上的某些内容而不是浏览器返回此页面时，product-list不显示。

我在控制台中没有任何错误，我可以确认 child 组件正在接收第二次渲染中的数据，在调试控制台中添加调试点。

为什么我的 child 组件只在第一次渲染时显示？甚至刷新都行不通。只有当我通过在浏览器中输入 url 导航到页面时，我才会显示相同的组件。提前致谢。

Answer 1

导航返回时未调用 ngInit。使用 ActivatedRoute 并订阅参数：

constructor(route: ActivatedRoute) {
  route.params.subscribe(x => {

  });
}

如果您想同时订阅两者，请使用 combineLatest。 https://www.learnrxjs.io/learn-rxjs/operators/combination/combinelatest

Answer 2

事实证明，我的顶级组件没有实现 OnDestroy 并且该组件在重定向后仍然存在。我通过执行以下操作解决了问题：

@Component({ /* ... */ })
class topComponent implements OnInit, OnDestroy {
  // ...
  private readonly destroy$ = new Subject<void>();

  // ...
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

destroy$.[METHOD] 将释放您使用 this.[SELECT].pipe(takeUntil(this.destroy$)).subscribe(...) 订阅的任何订阅的可观察对象。很整洁。

感谢您的帮助！

Angular @Input 无法在浏览器上运行，组件无法呈现

Angular @Input not working on browser back and component won't render

typescript

angular

ngxs