angular 父子组件交互

1. 父子组件数据传递

1.1 父传子 @Input()

?

1 2 3 4 5 6 7

<app-child [message]="message"></app-child>   子组件 import { Input } from '@angular/core';     @Input()   message?: string;

　1.2 子传父 @Output

?

1 2 3 4 5 6 7 8 9 10 11 12 13

父组件     <app-child   (newItemEvent)="addItem($event)"></app-child><br> addItem(data:string){   console.log('parent:',data) }   子组件 import { Output, EventEmitter } from '@angular/core';<br> @Output() newItemEvent = new EventEmitter<string>();<br>   clickHandle(){     this.newItemEvent.emit('time' + new Date().getTime()) // 触发自定义事件   }

1.3 父调用子组件 ViewChild ，类似vue的ref

?

1 2 3 4 5 6 7 8

<app-child [message]="message"  (newItemEvent)="addItem($event)" #child></app-child>     import {  ViewChild } from '@angular/core';    @ViewChild('child') child:any;    this.child.childFn(); // childFn 是子组件的方法