angular4之父子组件之间的传值

了解@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)}

参考博客

参考博客2