Angular Learning Series Six: Input, Output realize value transfer between components

1: After the new project, add two components :

　　ng g component relations / footer (subassembly)

　　ng g component relations / home (parent component)

2: references

　　In reference to the home label app.component.html: <home-App> </ App-home>

　　Home.component.html cited in the footer tag: <app-footer> </ app-footer>

3: Target:

Parent component sub-component information call: ViewChild (on a write)

Child component calls the new parent component information: Input

Subcomponents push information to the parent component: Output, EventEmitter 

 

home.component.ts

 1 import { Component, OnInit,ViewChild } from '@angular/core';
 2 
 3 @Component({
 4   selector: 'app-home',
 5   templateUrl: './home.component.html',
 6   styleUrls: ['./home.component.css']
 7 })
 8 export class HomeComponent implements OnInit {
 9 
10   @ViewChild("footer",{static:true}) Footer: the any;
 . 11    public MSG: the any = " I'm home to the header of the MSG " ;
 12 is  
13 is    public title: the any = " I'm home to the header title " ;
 14    constructor () {}
 15  
16    ngOnInit () {
 . 17    }
 18 is  
. 19    run () {
 20 is      Alert ( " I'm home inside the run method oh " );
 21 is    }
 22 is  
23 is    recevied (E) {
 24  
25      the console.log (E);
 26 is      Alert ( "I recevied method parent element will be pushed through the sub-assembly, to invoke the method " );
 27    }
 28  
29    getFooterMethod () {
 30      the this .footer.getData ();
 31 is    }
 32 }

View Code

 

home.component.html

1  <! - here changed app-header-> app-header2 tag failed call -> 
2  <! - <App-Header2 [title] = "title" [MSG] = "MSG"> </ APP- Header2> -> 
. 3  
. 4  < App-footer [title] = "title" [MSG] = "MSG" [RUN] = 'RUN' (Son) = "recevied ($ Event)" the #footer > </ APP- footer > 
. 5  
. 6  < Button (the Click) = "getFooterMethod ()" > method I can call subassembly oh </ Button > 
. 7  < P >home works!</p>
8 <hr>

View Code

 

footer.component.ts

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

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
  @Output() private son:any= new EventEmitter();
  @Input() msg:any;
  
  @Input() title:any;

  @Input() run:any;
  constructor() { }

  ngOnInit () { 
  } 

  runParent () { 
    the this .run (); 
  } 

  sendDataToParent () { 
    the this .son.emit ( " I am a sub-assemblies, and now I want to push Kazakhstan " ); 
  } 

  getData () { 
    Alert ( " I only a sub-assembly " ); 
  } 

}

View Code

 

footer.component.html

. 1  < P > footer Works! </ P > 
2  < P > {{MSG}} </ P > 
. 3  
. 4  < P > {{title}} </ P > 
. 5  
. 6  
. 7  < Button (the Click) = "runParent ( ) " > sub-assembly component method call the parent </ Button > 
. 8  
. 9  < Button (the Click) =" sendDataToParent () " > method subassembly push message, so that assembly is performed parent </ Button > 
10  <hr>

View Code

 

4: Effect of FIG.