发表于： 2020-05-16 20:27:50

1 2176

今日完成

学习父子组件如何传递数据，为写分页组件做准备


学习并练习使用生命周期函数


demo


父组件创建两个变量，并根据size生成数组

  public data: any = {
    'size': 10,
    'total': 20,
  }

  public list: Array<string> = this.creatList();


  creatList() {
    let num: number = this.data.size;
    var arr: Array<string> = [];
    for (let i = 0; i < num; i++) {
      let str = i + '号'
      arr.push(str)
    }
    return arr;
  }



父组件根据 根据数组list循环渲染

<p *ngFor="let a of list">{{ a }}</p>

<hr />


<app-son 

(pageData)="onPageData($event)"  //父组件监听子组件的事件

[data]="data" [list]="list">    //通过输入型绑定把数据从父组件传到子组件

</app-son>



子组件页面点击事件

<button (click)="Fn1()">按钮</button>


子组件 导入相关内容

import { Component, EventEmitter, Output, OnInit, Input } from '@angular/core';
//导入从父元素获取的数值

@Input() data: any;
@Input() list: any;
//输出事件
@Output() pageData = new EventEmitter();

//点击方法

Fn1() {
    let a = 5;
    this.pageData.emit(a);
  }
//打印获取的值

 ngAfterViewInit() {
    console.log('下面是子组件获取父组件的data值')
    console.log(this.data)
    console.log(this.list)
  }

父组件  监听事件

  onPageData(sonData) {

    this.data.size = sonData;

    //size改变 同时改变数组

    this.list = this.creatList();
    console.log('下面是改变数据后的父组件数据')
    console.log(this.data)
    console.log(this.list)
  }





上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1