ngOninit没有被触发

问题描述 投票:0回答:1

我有两个组件: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()方法没有被触发。

任何人都可以帮助我知道这是不起作用的任何原因?

enter image description here

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

全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();    
  }
}
javascript rxjs angular5
1个回答
1
投票

ngOnInit生命周期仅在首次呈现组件视图时运行。

由于旧的Tile Component没有被破坏,并且即使显示FullScreenComponent也始终处于后台,因此即使关闭组件,生命周期钩子也不会被触发。 (我假设您没有使用路由器进行导航,而是将其用作弹出窗口,因为问题中显示了关闭按钮)

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

更新:我仍然无法理解你为什么需要触发ngOnInit?如果你只是想在里面执行代码,那就把它作为一个单独的函数说initSomething然后在ngOnInit中调用它来第一次执行它。现在,如果您只是在crossDomainService.closeFullScreen上调用此函数,您将获得所需的效果。

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

请原谅,因为我离开办公桌并在手机上打字,但解释应该足以自行开发代码。

© www.soinside.com 2019 - 2024. All rights reserved.