Angular 4 is getting slower through time 的问题出现的原因是每次路由参数变化时都会创建一个新的 Subscription，这可能会导致许多订阅的堆积。

解决这个问题的方法是使用 switchMap，这样只会有一个订阅。具体的代码如下：

this.route.params
    .switchMap(params => {
      this.cardId = params.id;
      return this._apiService.getCardUser(params.id);
    })
    .takeUntil(this.ngUnsubscribe)
    .subscribe(
      response => {
        // SUCCESS
        this.userId = response.data[0].uuid;
        this.userBalance = response.data[0].balance;
        this.userName = response.data[0].name;
      },
      error => {
        // ERROR
        console.log('Failed ;(', error);
      }
    );

通过使用 switchMap，我们可以避免不必要的订阅堆积，从而提高 Angular 4 的性能。

Angular 4 is getting slower through time. The problem lies somewhere within the subscription mechanism in the get-Methods (getProducts, getCategories, etc.) of the api-Service.

The issue could be related to how the observable is created and handled. When calling the api-Service, the response is subscribed to. It is important to determine if the response is the original response from the http-request or if it is an observable that was created manually.

In general, it is not necessary to unsubscribe from http-calls in Angular as described in this Stack Overflow post: Do you need to unsubscribe from Angular 2 http calls to prevent memory leak?. However, if a custom observable is created instead of using the original http-observable, it may be necessary to clean it up manually.

It would be helpful to see some code from the api-Service to understand how the promises are created.

Another potential issue to consider is how the getProducts-Method is called. If a different UUID is passed every time the method is called, a new entry is written into localStorage for each UUID. This could contribute to the slowdown over time.

To address this issue, it is recommended to review the subscription mechanism in the get-Methods of the api-Service. Ensure that the original http-observable is used and not a custom observable. If custom observables are used, make sure to clean them up properly. Additionally, consider optimizing the usage of localStorage and avoid unnecessary writes to improve performance.

Angular 4的性能随着时间的推移而变慢的原因可能是因为运行应用程序作为单页应用程序（SPA）。在SPA中，每当用户访问新页面时，DOM会变得更重。因此，您需要努力保持DOM的轻量级。

以下是我发现显着提高应用程序性能的主要原因。

检查以下要点：

- 如果使用选项卡控件，则只加载活动选项卡内容，其他选项卡内容不应存在于DOM中。

- 如果要加载任何弹出窗口，请确保它在打开时仅加载主体。

- 公共组件（如确认弹出窗口和消息警报）应该只定义一次并且可以全局访问。

- 使用*ngFor和trackby来提高性能。

- 在服务完成后，调用对象的destroy方法。

在ngOnDestroy中取消订阅服务：

import { Subject } from 'rxjs/Subject'
import 'rxjs/add/operator/takeUntil';
ngOnDestroy() {        
    this.ngUnsubscribe.next(true);
    this.ngUnsubscribe.complete();
}
this.frameworkService.ExecuteDataSource().takeUntil(this.ngUnsubscribe).subscribe((data: any) => {
    console.log(data);
});

参考以下链接获取更多详细信息：

- https://medium.com/paramsingh-66174/catalysing-your-angular-4-app-performance-9211979075f6

还可以保存订阅并在ngOnDestroy中取消订阅。