A-A+

angular4之父子组件之间的传值

2018年08月09日 javascript 暂无评论 阅读 17 views 次

了解@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)}
打赏作者
如果文章对您有所帮助请打赏支持本站发展。

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

标签:

给我留言

您必须 登录 才能发表留言!

Copyright © 前端技术分享休闲玩耍去处分享-大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: