Java孩子父母类,@Output孩子和父母之间的沟通 . 角2（5）

我正在尝试学习角度2，并且我正在尝试使用来自我的子组件的数据在父组件中设置变量 . 基本上我在父视图中有一个子 Headers ，我希望 Headers 和一些HTML根据加载的子项进行更改 .

父组件：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({

selector: 'app-parent',

templateUrl: './parent.component.html',

styleUrls: ['./parent.component.scss'],

encapsulation: ViewEncapsulation.None

})

export class ParentComponent {

childDetails: {title: String, helperBar: String};

onChildLoaded(childData: {

childTitle: string,

childHelperBar: string

}) {

this.childDetails ={

title: childData.childTitle,

helperBar: childData.childHelperBar

};

console.log (childDetails);

}

}

子组件：

import { Component, OnInit, ViewEncapsulation, Output, EventEmitter }

from '@angular/core';

@Component({

selector: 'app-first-child',

templateUrl: './first-child.component.html',

styleUrls: ['./first-child.component.scss'],

encapsulation: ViewEncapsulation.None

})

export class FirstChildComponent implements OnInit {

@Output() childLoaded = new EventEmitter

childHelperBar: string}>();

constructor() { }

ngOnInit() {

this.childLoaded.emit({

childTitle: 'Dashboard',

childHelperBar: '

Dash Button

'

});

}

}

最后是我的父HTML：

{{ childDetails.title }}

{{ childDetails.helperBar }}

对于我的生活，我无法使用这种方法，也无法确定我哪里出错了 . 我总是可以把子 Headers 放在我的孩子身上，但我不喜欢重复代码这么多次的想法，这会让我的布局更难实现 .