angular笔记-组件通信

angular前端组件化思想：将部分模版和逻辑封装为组件，并在不同的页面位置中使用，可以实现代码的复用
angular组件间通信的方式：
@input @output 以及 @ViewChild
一：@input 父传子

//父html文件
<app-child [data]='msg' ></app-child>

//父ts文件
export class Child implements OnInit {
  msg= '100';
  constructor() { }
  ngOnInit() {
  }
}

//子html文件
<p>{{data}}</p>
//子ts文件
import{ Input } from '@angular/core'
@input() data:any;

二：@output 子传父

// 引入Output 与EventEmitter
import {Output ,EventEmitter} from '@angular/core;'
	@Output() private outer = new EventEmitter();
	public msg= '消息'
	child(){
	 this.outer.emit(this.msg); 
	}
	
	//父组件
	<app-child (outer)="getMsg($event)" ></app-child>

三：@ViewChild
第一种父组件直接调用子组件的方法

// 父html文件
<app-child #child></app-child>
<a (click)=‘child.getMsg’ href='javascript:;'></a>

//子ts文件
export class CallRecordComponent implements OnInit {
  constructor(){};
	getMsg(){
	 alert('我是子组件')
	}
}

第二种是父组件间接调用子组件的方法

//父html文件
<app-child #child002></app-child>
<a (click)=‘getMsg002’ href='javascript:;'></a>
//父ts文件
import {ViewChild} form '@angular/core';
	@ViewChild('child002') child002_name;
	getMsg002(){
	 this.child002_name.getMsg();
	}

//子ts文件
export class CallRecordComponent implements OnInit {
  constructor(){};
	getMsg(){
	 alert('我是子组件')
	}
}