Angular NgIf性能问题适用于div，而不是ng容器

我正在编写一个应用程序，在当前状态下，它不是很大。在表演上没有任何问题，但我注意到一种奇怪的行为。我有三个部分：

map.component
dashboard.component
info.component

map.component

有一种方法，可以使用

Subject

通知

仪表板.component

更改布尔变量的状态（默认值设置为false）：

此变量的状态以以下方式反映在

dashboard.component.html

中：

<ng-container *ngIf="showSomething">
    <div class="info-wrapper">
        <custom-component></custom-component>
    </div>
</ng-container>

<div class="info-wrapper" *ngIf="showSomething">
    <custom-component></custom-component>
</div>

仅在第一次
显示某些内容时
更改为
true
div
info wrapper
需要将近五秒钟的时间才能呈现。这意味着，如果我将此变量更改为false，然后再次更改为true，则该组件的渲染几乎是瞬时的

我没有使用任何动画或自定义库（Toastr除外）

可能是什么问题

我还添加了一些相关的内容

app.module.ts

@NgModule({
    declarations: [
        NngMapComponent,
        NngMainComponent,
        NngInfoComponent,
        NngLoginComponent,
        NngWidgetComponent,
        NngLevelsComponent,
        NngFooterComponent,
        NngHeaderComponent,
        NngDashboardComponent,
    ],
    imports: [
        routing,
        BrowserModule,
        HttpClientModule,
        ToastrModule.forRoot({
            preventDuplicates: true
        }),
        AngularResizedEventModule,
    ],
    providers: [
        AuthGuard,
        EnvService,
        DataService,
        ShareService,
        TranslationService,
        AuthenticationService,
    ],
    bootstrap: [NngMainComponent]
})

package.json依赖关系

"dependencies": {
    "@angular/animations": "^9.0.0",
    "@angular/common": "~9.0.0-rc.9",
    "@angular/compiler": "~9.0.0-rc.9",
    "@angular/core": "~9.0.0-rc.9",
    "@angular/forms": "~9.0.0-rc.9",
    "@angular/platform-browser": "~9.0.0-rc.9",
    "@angular/platform-browser-dynamic": "~9.0.0-rc.9",
    "@angular/router": "~9.0.0-rc.9",
    "angular-resize-event": "^1.1.1",
    "ngx-toastr": "^12.0.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.0-rc.10",
    "@angular/cli": "~9.0.0-rc.10",
    "@angular/compiler-cli": "~9.0.0-rc.9",
    "@angular/language-service": "~9.0.0-rc.9",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.2",
    "toastr": "^2.1.4",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.4"
  }

可能有两种情况下，组件未渲染或需要花费时间渲染

案例1：如果未检测到变化


这种情况很少发生，因为角度传感器无法检测到showSomething值的变化。在这种情况下，您可以编程地说angular，以使用change detector reference检测组件中的更改。你可以参考

案例2：在自定义组件中可能有一些任务正在运行（如Api调用），然后显示组件。


在这种情况下，您可以显示加载屏幕，而不是将组件留空。要知道您的用例是否属于此场景，请在
自定义组件构造函数中编写一些日志语句
，并检查打印日志所需的时间
谢谢您的回复。组件没有执行任何api调用，只是在显示其内容之前解析一些数据（执行此操作时有一个微调器）。我想我会尝试一下
OnPush
策略。
"dependencies": {
    "@angular/animations": "^9.0.0",
    "@angular/common": "~9.0.0-rc.9",
    "@angular/compiler": "~9.0.0-rc.9",
    "@angular/core": "~9.0.0-rc.9",
    "@angular/forms": "~9.0.0-rc.9",
    "@angular/platform-browser": "~9.0.0-rc.9",
    "@angular/platform-browser-dynamic": "~9.0.0-rc.9",
    "@angular/router": "~9.0.0-rc.9",
    "angular-resize-event": "^1.1.1",
    "ngx-toastr": "^12.0.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.0-rc.10",
    "@angular/cli": "~9.0.0-rc.10",
    "@angular/compiler-cli": "~9.0.0-rc.9",
    "@angular/language-service": "~9.0.0-rc.9",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.2",
    "toastr": "^2.1.4",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.4"
  }