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

妖狐艹你老母 2022-05-27 00:21 149阅读 0赞

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<string>=new EventEmitter();
    
      constructor() {   
       }
    
      ngOnInit() {
        this.soonOutput.emit("这是子组件给父组件的值output");
      }
    }

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

## 实例下载 ##

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