zoukankan      html  css  js  c++  java
  • (二)Angular2 组件通信(ViewChild,EventEmitter)

    一、ViewChild 方法(不便于组件解耦及组件重用)

    1.创建父组件parent

    2.创建子组件child

    3.在child中创建 print 方法

    print() {
        alert('print);
    }

    4.在parent.component.html中引入child组件

    <app-child #child></app-child>

    5.在parent中引入ViewChild并执行child方法

    @ViewChild('child')
    child: ChildComponent; //父组件中获得子组件的引用
    
    ngOnInit(){
      this.child.print();
    }

    二、EventEmitter 方法,实质是使用Angular所提供的输入输出(Input,Output)(便于组件解耦,组件重用)

    1.创建父组件parent

    2.创建子组件child

    3.在child中创建 print 方法

    print() {
        alert('print);
    }

    4.在parent中定义EventEmitter 事件,并抛出

    public parentEvt: EventEmitter<any> = new EventEmitter();
    
    public emitEvt() {
        this.parentEvt.emit();   
    }

    5.在parent.component.html中引入child组件并传入parent的Event事件

    <app-child [evt]='parentEvt'></app-child>

    6.在child中使用@Input接收Event事件(参考Angular@Input用法),同时增加取消订阅事件(ngDestroy)

    private pEvtSub: Subscription = null;
    private pEvt: EventEmitter<any> = null;
    
    @Input()
    public set evt(value: EventEmitter<any>) {
        this.pEvt = value;
        if (!this.pEvt) {
            return
        }
        if (this.pEvtSub) {
            this.pEvtSub.unsubscribe();
        }
        this.pEvtSub = this.pEvt.subscribe((evt) => {
            this.print()
        });
    }
    
    ngDestroy() {
      if (this.pEvtSub) {
        this.pEvtSub.unsubscribe();
      }
    }

    三、EventEmitter + Service 方法,实质是建立一个EventService做为中转进行事件发布,组件在ngOnInit中对事件进行订阅

  • 相关阅读:
    37 反转一个3位整数
    372 在O(1)时间复杂度删除链表节点
    174 删除链表中倒数第n个节点
    13 字符串查找
    4.Single Number(出现一次的数)
    7.斐波那契数列
    6.旋转数组的最小数字
    5.用两个栈实现队列
    垃圾收集器与内存分配策略---确定对象的存亡状态
    Java内存区域与内存溢出异常---对象的内存布局和对象的访问定位
  • 原文地址:https://www.cnblogs.com/chendongbky/p/11212094.html
Copyright © 2011-2022 走看看