如何在angular2中更改子组件的父变量

Ang*_*Beg 0 events angular

我的父组件html:

<app-calendar-component [view]="calView" [callback]="calendarOptions" ></app-calendar-component>
<app-weekdetails-component *ngIf="test"></app-weekdetails-component>
Run Code Online (Sandbox Code Playgroud)

我的父组件ts:

public test:boolean=false;
Run Code Online (Sandbox Code Playgroud)

appCalendarComponent:

ngOnInit(){
Calling services here and using data, after this process I need to set 
my variable test to be true which is defined in parent component.
}
Run Code Online (Sandbox Code Playgroud)

因此,当初始化第一个子节点(appCalendarComponent)时,我需要将变量测试设置为true.

小智 5

您应该使用输出方式与父组件进行通信.

对孩子:

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

@Output() componentInit = new EventEmitter<>();

ngOnInit(){
Calling services here and using data, after this process I need to set 
my variable test to be true which is defined in parent component.

//After init
 this.componentInit.emit();
}
Run Code Online (Sandbox Code Playgroud)

在父母身上:

HTML:

<app-calendar-component 
                  (componentInit)="componentInitialize()" 
                  [view]="calView" 
                  [callback]="calendarOptions">
</app-calendar-component>
Run Code Online (Sandbox Code Playgroud)

打字稿:

componentInitialize():void{
 this.test = true;
}
Run Code Online (Sandbox Code Playgroud)