我有两个组件: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);
}
全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();
}
}
ngOnInit
生命周期仅在首次呈现组件视图时运行。
由于旧的Tile Component
没有被破坏,并且即使显示FullScreenComponent
也始终处于后台,因此即使关闭组件,生命周期钩子也不会被触发。 (我假设您没有使用路由器进行导航,而是将其用作弹出窗口,因为问题中显示了关闭按钮)
除非您共享一些代码,否则无法帮助您隔离问题或帮助您提出建议。但是ngOnInit没有根据问题触发的原因是因为组件没有被重新创建。
更新:我仍然无法理解你为什么需要触发ngOnInit?如果你只是想在里面执行代码,那就把它作为一个单独的函数说initSomething
然后在ngOnInit中调用它来第一次执行它。现在,如果您只是在crossDomainService.closeFullScreen
上调用此函数,您将获得所需的效果。
要在调用closeFullScreen时触发该函数,您可以在Subject
服务中创建crossDomainService
,并在ngOnInit()
中订阅此主题,并在每次发出值时运行上面提到的initSomething
函数。在closeFullScreen
功能内,你现在要做的就是做一个Subject.next()
请原谅,因为我离开办公桌并在手机上打字,但解释应该足以自行开发代码。