2

我有两个组件，都<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>

4

2 回答 2

2

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

@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>
于 2017-08-23T08:05:02.900 回答
2

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

在您的日历组件中： 

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 演示。查看控制台日志。

于 2017-08-23T08:10:01.500 回答