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);
      }

full-screen.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>

header.component.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生命周期仅在组件的视图首次呈现时运行。

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

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

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

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

为简洁起见，因为我不在办公桌旁并且可以在手机上打字，尽管说明应该足以自己开发代码。

Answer 2

一种简单的解决方法是使用changedetectorRef连接组件的初始状态。

`import { Component, OnInit, ChangeDetectorRef } from '@angular/core';`

并将其插入构造函数中，您可以将OnInit函数保留为空白

constructor(){ this.changeDetectorRef.detectChanges();}

ngOnit没有被触发

2 个答案: