在其他组件完全加载后触发一个组件方法

Question

我有两个组件，都像这样加载到我的 <app-root> 中：

<app-header [calendarReference]="calendarRef"></app-header>

<app-calendar #calendarRef></app-calendar>

和index.html

<body>
  <app-root></app-root>
</body>

有没有办法在 <app-calendar> 组件完全加载后触发 <app-header> 组件方法？

Answer 1

在 CalenderComponent 上创建一个 Output()（自定义事件）并在组件被认为已加载时触发它（最好在 ngAfterViewInit回调）

@Component({
  ...
})
export class CalenderComponent implements AfterViewInit {
  @Output() loaded = new EventEmitter();

  ngAfterViewInit() {
    this.loaded.emit();
  }
}

然后您可以在触发 loaded 事件时从模板触发 HeaderComponent 上的任何方法（为简洁起见省略了模板中的其他细节）

<app-header #header></app-header>
<app-calendar (loaded)="header.someMethodToCall()"></app-calendar>

Answer 2

使用@Output装饰器。我不知道你的代码，所以我假设组件：

在您的 CalendarComponent 中：

import { Component, AfterViewInit } from '@angular/core';
import { Output, EventEmitter } from '@angular/core';

@Component({
  ...
})
export class CalendarComponent implements AfterViewInit {
    @Output() calendarLoaded: EventEmitter<boolean> = new EventEmitter();

    ngAfterViewInit(){
        console.log('Calendar Loaded');
        this.calendarLoaded.emit(true);
    }
}

赶上你的事件app.component.html:

<app-header #appHeader></app-header>

<app-calendar #calendarRef (calendarLoaded)="afterCalendarLoaded()"></app-calendar>

.. 这就是您的 app.component.ts 的样子：

import {Component,ViewChild} from '@angular/core';
import {HeaderComponent} from './header.component';

@Component({
  ...
})
export class AppComponent {
    @ViewChild('appHeader') appHeader: HeaderComponent;

    afterCalendarLoaded(){
        this.appHeader.someMethod();
    }    
}

这是一个工作 plunker demo。查看控制台日志。

在其他组件完全加载后触发一个组件方法

Trigger one component method after other component fully load

angular

lifecycle-hook