Angular4父子组件传递@Input和@Output

Angular提供了@Input和@Output语法来处理组件数据输入和输出。

---

@Input

Input输入属性，父组件向子组件传递信息。

父组件HTML代码：

<div>
  这是父组件中输入值：<br><br>{{inputTransmission}} 
div>
<br>
<br>
<br>
<div>
  <app-soon [soonInput]="inputTransmission">app-soon>
div>

父组件Component.ts代码：

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

@Component({
  selector: 'app-father',
  templateUrl: './father.component.html',
  styleUrls: ['./father.component.css']
})
export class FatherComponent implements OnInit {

  inputTransmission:string="这是父组件给子组件（input值）";

   constructor() { }

   ngOnInit() {
   }

}

子组件HTML代码：

<div>
  这是子组件中接收父组件中的输入信息：
div>
<br>
<div>
  {{soonInput}}
div>

子组件Component.ts代码：

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

@Component({
  selector: 'app-soon',
  templateUrl: './soon.component.html',
  styleUrls: ['./soon.component.css']
})
export class SoonComponent implements OnInit {

  @Input()
  soonInput:string="这是子组件默认值";

  constructor() {

   }

  ngOnInit() {
  }

}

父组件中inputTransmission变量值可以传递给子组件。

@Output

Output输出属性，子组件向父组件传递信息。Output不能向Input一样将值直接传递，需要用EventEmitter发射到父组件中。

父组件HTML代码：

<div>
  这是父组件中输出值：<br><br>{{outputTransmission}}
div>
<br>
<br>
<br>
<div>
    <app-soon  (soonOutput)="receive($event)">app-soon>
div>

父组件Component.ts代码：

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

@Component({
  selector: 'app-father',
  templateUrl: './father.component.html',
  styleUrls: ['./father.component.css']
})
export class FatherComponent implements OnInit {

  outputTransmission:string="这是父组件中output值";  

   constructor() { }

   ngOnInit() {
   }

   receive(event){
    this.outputTransmission=event;
  }
}

子组件HTML代码：

<div>
  这是子组件中要给父组件中的值：
div>
<br>
<div>
  {{soonOutput}}
div>

子组件Component.ts代码：

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

@Component({
  selector: 'app-soon',
  templateUrl: './soon.component.html',
  styleUrls: ['./soon.component.css']
})
export class SoonComponent implements OnInit {

  @Output()
  soonOutput:EventEmitter=new EventEmitter();

  constructor() {   
   }

  ngOnInit() {
    this.soonOutput.emit("这是子组件给父组件的值output");
  }
}

子组件中soonOutput变量值可以传递给父组件。
子组件必须通过EventEmitter方法把值发射到父组件中，而且子组件发射的是事件，所以父组件接收时候是通过捕获发射事件来得到值。

实例下载

https://download.csdn.net/download/h273979586/10333970