Use @input subassembly angular data acquisition assembly and method of the parent

1 to transfer data using @input

1, using the parent component assembly app-header from the incoming data msg.

 

<app-header [msg]="msg"></app-header>

2, sub-assembly is introduced Input 

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

3, the subassembly @Input msg: string receiving data transmission over the parent component

export class HeaderComponent implements OnInit {
@Input() msg:string
constructor() { }
ngOnInit() {
}
}

4, using the data in the parent subassembly component

{{msg}}

2 using the data transfer @input

Implementation child component calls the parent component

1, parent component definition method

run(){
alert('这是父组件的 run 方法');
}

2, the delivery method is to use self-assembly run ()

<app-header [msg]="msg" [run]="run"></app-header>

3. The method subassembly receiving parent element and used

export class HeaderComponent implements OnInit {
@Input() msg:string;
@Input() run:any;
constructor() { }
ngOnInit() {
this.run(); /*子组件调用父组件的 run 方法*/
}
}