Question

我有两个组件，两个组件都加载到我的<app-root>中，如下所示：

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

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

和index.html

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

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

Answer 1

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

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

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

然后，当HeaderComponent事件被触发时，您可以从模板触发loaded上的任何方法（为了简洁，省略模板中的其他详细信息）

<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。请参阅控制台日志。

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

2 个答案: