angular - 打开对话框时 ngOnInit 不触发

Question

打开对话框时，未调用 ngOnInit。我可以让它开火的唯一方法是调整窗口大小时。我尝试使用 detectChanges 和 zone.run() 但它没有改变任何东西。

这是对话框组件的代码:

(settings-dialog.component.ts)

import { Component, OnInit } from '@angular/core';
import { ElectronService } from '../../providers/electron.service';

@Component({
  selector: 'app-settings-dialog',
  templateUrl: './settings-dialog.component.html',
  styleUrls: ['./settings-dialog.component.scss']
})
export class SettingsDialogComponent implements OnInit {
  public settings;

  constructor(
    private electronService: ElectronService,
  ) { }

  ngOnInit(): void {
    console.log('Getting settings');
    this.getSettings();
  }

  private getSettings() {
    this.settings = this.electronService.settings.getAll();
    console.log(this.settings);
  }
}

(settings-dialog.module.ts)
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

import { SettingsDialogComponent } from './settings-dialog.component';

@NgModule({
  imports: [ CommonModule ],
  providers: [ ],
  declarations: [ SettingsDialogComponent ],
  entryComponents: [ SettingsDialogComponent ]
})
export class SettingsDialogModule { }

正在使用 Electron 从菜单栏设置加载组件:

(app.component.ts)

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';

import { SettingsDialogComponent } from './dialogs/settings-dialog/settings-dialog.component';
import { ElectronService } from './providers/electron.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(public electronService: ElectronService, public translate: TranslateService, private dialog: MatDialog) {
    this.setupMenu();
  }

  private setupMenu() {
    const menu = this.electronService.remote.Menu.buildFromTemplate([{
      label: 'File',
      submenu: [{
        label: 'Settings',
        click: () => this.openSettingsDialog()
      }]
    }]);

    this.electronService.remote.Menu.setApplicationMenu(menu);
  }

  private openSettingsDialog() {
    this.dialog.open(SettingsDialogComponent);
  }
}

(app.module.ts)
import '../polyfills';
import 'reflect-metadata';

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatDialogModule } from '@angular/material';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { WorkspaceModule } from './components/workspace/workspace.module';
import { SettingsDialogModule } from './dialogs/settings-dialog/settings-dialog.module';
import { WebviewDirective } from './directives/webview.directive';
import { ElectronService } from './providers/electron.service';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    AppComponent,
    WebviewDirective
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (HttpLoaderFactory),
        deps: [HttpClient]
      }
    }),
    WorkspaceModule,
    MatDialogModule,
    SettingsDialogModule
  ],
  providers: [ElectronService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我错过了什么？我做错了什么？ (我可能不会再尝试了)

谢谢!

Answer 1

I tried using detectChanges and zone.run() but it did not change anything

您的方法是正确的，但可能没有正确使用它。当您在 Electron 应用程序中单击菜单时，您将离开 ngZone。所以下面的代码应该可以工作并且 ngOnInit 应该像我检查的那样被触发:

app.component.ts

import { NgZone } from '@angular/core';
...
export class AppComponent {
  constructor(...private zone: NgZone) {}


  private openSettingsDialog() {
    this.zone.run(() => {
      this.dialog.open(SettingsDialogComponent);
    });
  }