@Input和@Output

1. 描述
   • 在父子指令或者组件之间共享数据
2. @Input
   • 从父组件中把数据发送到子组件中
   • 通过@Input装饰过的变量可以作为共享变量在父子组件之中使用，如下：
     • 在子组件的ts文件中定义一个@Input类型的string变量item，默认值为空字符串
     • 查看代码

       import { Component, OnInit,Input, SimpleChanges } from '@angular/core';
       
       @Component({
         selector: 'app-ly-input-child',
         templateUrl: './ly-input-child.component.html',
         styleUrls: ['./ly-input-child.component.css']
       })
       export class LyInputChildComponent implements OnInit {
       
         // 使用@Input()来装饰item属性
         @Input() item='';
         constructor() { }
       
         ngOnInit(): void {
         }
       
         ngOnChanges(changes: SimpleChanges): void {
           console.log('onChange====>'+changes['item'].previousValue+'|||||CurrentValue='+changes['item'].currentValue);
         }
       
       }

     • 在子组件的模板文件中作为插值字符串使用
     • 查看代码

       <p>
           ly-input-child works!
           Today's Item:{{item}}
       </p>

     • 在父组件的ts文件中定义个名叫currentItem的变量并且赋值
     • 查看代码

       import { Component, OnInit } from '@angular/core';
       
       @Component({
         selector: 'app-ly-input-parent',
         templateUrl: './ly-input-parent.component.html',
         styleUrls: ['./ly-input-parent.component.css']
       })
       export class LyInputParentComponent implements OnInit {
         // 定义CurrentItem，用于和子组件中的@input类型的item变量绑定
         currentItem = 'Liye in pain';
         constructor() { }
       
         ngOnInit(): void {
         }
       
       }

     • 在父组件的模板文件中引入子组件的模板文件，并且使用属性绑定把子组件的item属性绑定到父组件的currentItem属性上(记得在app.component.ts中导入FromModule组件哦，否则ngModel编译会报错的)
     • 查看代码

       
       <app-ly-input-child [item]="currentItem"></app-ly-input-child>
       -------------------------------------------------------------------
       ly-input-parent works! 
       <div>
           {{currentItem}}<br>
           <label for="item-name">currentItemName:</label>
           <input id="item-name" [(ngModel)]="currentItem" placeholder="name">
       </div>

     • 通过@Input()装饰器，angular把currentItem的值传给了子组件的item，然后在子组件上就可以渲染为字符串Liye in pain
     • 
3. @Output
   • 从子组件中利用发射器发送数据到父组件
   • 子组件或者指令中的@Output()装饰器允许将数据从子组件传给父组件，如下：
     • 在子组件的ts文件中用@Output()装饰器来装饰一个string类型的数据发送器newItemEvent，并且定义一个AddNewItem方法，内部实现为发送数据
     • 查看代码

       
       import { Component, OnInit } from '@angular/core';
       import { Output, EventEmitter } from '@angular/core';
       
       @Component({
         selector: 'app-ly-output-child',
         templateUrl: './ly-output-child.component.html',
         styleUrls: ['./ly-output-child.component.css']
       })
       export class LyOutputChildComponent implements OnInit {
       
         // 定义一个被@Output装饰的string类型的事件发送器，代表此数据可以发送到父组件
         @Output() newItemEvent = new EventEmitter<string>();
         constructor() { }
       
         ngOnInit(): void {
         }
       
         // 将输入的数据发送到父组件中(父组件中将定义一个对象与newItemEvent进行绑定)
         addNewItem(value:string){
           this.newItemEvent.emit(value);
           console.log(`child emit ${value}`);
         }
       
       }

     • 在子组件的模板文件中定义一个input输入框，定义一个模板变量#newItem(允许在模板中的其他位置直接引用用户输入的数据)；定义一个button按钮，用来向父组件发送数据
     • 查看代码

       
       <p>ly-output-child works!</p>
       <label for="item-input">Add an item:</label>
       <input type="text" id="item-input" #newItem>
       <button (click)="addNewItem(newItem.value)">Add to parent's list</button>

     • 在父组件的ts文件中定义一个名叫items的Array，并且定义一个addItem的方法
     • 查看代码

       
       import { Component, OnInit } from '@angular/core';
       
       @Component({
         selector: 'app-ly-output-parent',
         templateUrl: './ly-output-parent.component.html',
         styleUrls: ['./ly-output-parent.component.css']
       })
       export class LyOutputParentComponent implements OnInit {
       
         constructor() { }
       
         ngOnInit(): void {
         }
         items = ['item1','item2','item3','item4'];
         
         addItem(newItem:string){
           this.items.push(newItem);
         }
       
       }

     • 在父组件的模板文件中的子组件选择器上进行父子数据交互的绑定，也就是将子组件中的newItemEvent与父组件中的addItem方法进行绑定，那么，在子组件中当用户有输入的时候，@Output装饰的发送器会将数据发送给父组件
     • 查看代码

       
       <p>ly-output-parent works!</p>
       <app-ly-output-child (newItemEvent)="addItem($event)"></app-ly-output-child>
       <ul>
           <li *ngFor="let item of items">{{item}}</li>
       </ul>

     • 结果呈现，使用ul来呈现数据效果
     • 

搜索

复制