了解@Input和@Output
- @Input :
- 将父作用域中的值“输入”到子作用域中,之后子作用域进行相关处理
- @Output :
- 子作用域触发事件执行响应函数,而响应函数方法体则位于父作用域中,相当于将事件“输出”到父作用域中,在父作用域中处理。
- Output一般都是一个EventEmitter的实例,使用实例的emit方法将参数emit到父组件中,触发父组件中对应的事件。
父组件向子组件传值【@Input()】
- 子组件中import {Input} from ‘@angular/core’
- 子组件中申请输入变量 @Input() fromFatherValue;
- 假如子组件的标签为:
<child></child>
- 父模块在引用子模块的时候是用的[]
- 将子组件用在父组件中,使用 [fromFatherValue]来接收想要传入的值
<child [fromFatherValue]="value"></child>
- 这样从父组件中接收的value就可以在子组件中使用了
子组件向父组件传值
- 子组件中import {Output,EventEmitter}from ‘@angular/core’
- 子组件中申请输出实例@Output fromChild = new EventEmitter()
- 假如子组件的标签为:
<child></child>
- 父模块在引用子模块的时候是用的()
- 将子组件用在父组件中,使用(fromChild)来传递emit函数
<child (from-child)="fatherFun()" ></child>
- 子组件中触发某种事件时触发emit事件
clickevent(){
this.fromChild.emit(val)
}
如果想传递信息,可以在new EventEmitter()里面加入我们想要传递的东西,然后在使用的时候加入函数的参数里面。
- 比如我们想传递一个test,我们只需要这么改:
class IntervalDir { @Output() everySecond = new EventEmitter(test); } < interval-dir (every-second)=”fun(test)”> fun(test) { console.log(test); }
- 或者
class Out {
@Output() outevent = new EventEmitter();
}
<div (outevent)="search($event)"></div>
search(val){console.log(val)}