javascript - ngOninit 没有被触发

Question

我有两个组件:TileComponent.ts 和 FullScreenComponent.ts。

单击 TileComponent 后，FullScreenComponent 将打开。在 TileComponent 中，我有以下代码。每当 TileComponent 加载时，都会触发 ngOnInit() 方法。

TileComponent.ts:

ngOnInit() {
    console.log("TileCompnent :ngOnInit");        

    this.crossDomainService.globalSelectors.subscribe(selectors => {
      globalCountries = selectors.jurisdiction || [];
      this.getArticles(globalCountries);
    });

    // Multiple Language
    this.crossDomainService.globalLanguage.subscribe(() => {
      console.log("TileCompnent :ngOnInit : crossDomainService");
      this.getArticles(globalCountries || countries);
    });
  }

现在关闭 FullScreenComponent 会导致 TileComponent 的加载，但这次我看到 ngOnInit() 方法没有被触发。

谁能帮我知道这不起作用的原因吗？

tile.component.html:

<div class="carousel-inner">
      <a
        (click)="openFullScreen(article)"
        *ngFor="let article of articles"
        [ngClass]="getItemClassNames(article)"
        class="item"
      >
</div>

tile.component.ts

ngOnInit() {
    console.log("TileCompnent :ngOnInit");
    const countries =
      this.crossDomainService.initialGlobalSelectors &&
      this.crossDomainService.initialGlobalSelectors.jurisdiction.length
        ? this.crossDomainService.initialGlobalSelectors.jurisdiction
        : [];
    this.getArticles(countries);

    let globalCountries;

    this.crossDomainService.globalSelectors.subscribe(selectors => {
      globalCountries = selectors.jurisdiction || [];
      this.getArticles(globalCountries);
    });

    // Multiple Language
    this.crossDomainService.globalLanguage.subscribe(() => {
      console.log("TileCompnent :ngOnInit : crossDomainService");
      this.getArticles(globalCountries || countries);
    });
  }
    openFullScreen(article: ArticlePreview) {
        this.crossDomainService.openFullScreen(article);
      }

全屏.component.html:

<div class="layout-center-wrapper" [hidden]="isPolicyShown">
  <app-header></app-header>

  <div class="row wrapper">
    <app-sidebar></app-sidebar>
    <router-outlet></router-outlet>
  </div>
</div>

<app-policy [hidden]="!isPolicyShown"></app-policy>

header.component.html:

<header class="row header">
  <p class="header__title">
    Application Name
    <a (click)="closeFullScreen()" class="header__close">
      <span class="icon icon_close"></span>
    </a>
  </p>
</header>

标题.组件.ts:

import { Component } from '@angular/core';
import { CrossDomainService } from '../../core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.less']
})
export class HeaderComponent {
  constructor(private crossDomainService: CrossDomainService, private analyticsService: AnalyticsService) {}

  closeFullScreen() {
    this.crossDomainService.closeFullScreen();    
  }
}

Answer 1

ngOnInit 生命周期仅在首次渲染组件 View 时运行。

由于旧的 Tile Component 不会被销毁，并且即使在显示 FullScreenComponent 时也始终处于后台，因此即使关闭该组件，生命周期钩子(Hook)也永远不会被触发。(我假设您没有使用路由器进行导航，而是将其用作弹出窗口，因为有一个关闭按钮，如问题所示)

除非您共享一些代码，否则无法帮助您隔离问题或为您提供建议。但是 ngOnInit 没有按照问题触发的原因是因为组件没有重新创建。

更新:我仍然不明白为什么你需要触发 ngOnInit ？如果您只想执行其中的代码，请将其设为一个单独的函数，例如 initSomething，然后在 ngOnInit 中调用它以第一次执行它。现在，如果您只需在 crossDomainService.closeFullScreen 上调用此函数，您就可以获得所需的效果。

要在调用 closeFullScreen 时触发该函数，您可以在 crossDomainService 服务中创建一个 Subject，并在 ngOnInit() 内订阅该主题。 ，并在每次发出值时运行上面提到的 initSomething 函数。在 closeFullScreen 函数中，您现在要做的就是执行 Subject.next()

请原谅我的简洁，因为我离开了办公 table 并在手机上打字，尽管解释应该足以让您自己开发代码。