Angular7+primeNg，父组件传值给子组件，子组件通过ngOnChanges()来截听父组件值的变化

最新推荐文章于 2021-08-03 11:11:29 发布

迦迦迦迦

最新推荐文章于 2021-08-03 11:11:29 发布

阅读量2.2k

点赞数

分类专栏： Angular primeng onchange 父子传值

本文链接：https://blog.csdn.net/weixin_39880609/article/details/84950699

版权

Angular 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

primeng

1 篇文章 0 订阅

订阅专栏

onchange

1 篇文章 0 订阅

订阅专栏

需要的功能：父组件中有个表格，通过点击不同的表格，旁边显示不同的数据树
父组件html：

<p-table [columns]="cols" [value]="tables" selectionMode="single" (click)="sendMsg(selectedTable.Name)"  [(selection)]="selectedTable" dataKey="Name" >

主要是添加sendMsg(selectedTable.Name)这个点击函数，获取selectedTable.Name选中的值，
父组件component.ts:

 //点击触发事件，改变父子组件传输的msg值
 tabname:any;
 msg:any;
  sendMsg(tabname){
      this.msg=tabname;
      alert('table点击后的msg值是'+this.msg)
      return this.msg;
  }

通过点击事件改变msg的值。
子组件HTML：

<h3 class="first">PAT(TSID:1)</h3>
    <p-tree [value]="filesTree0"></p-tree>

直接读取数据
子组件component.ts:

//引入input(接收父组件的值)，[OnChanges,SimpleChange(监听值变化)](https://angular.cn/guide/component-interaction)
import { Component, OnInit,Input,OnChanges,SimpleChange,ViewChild } from '@angular/core';

@Input() msg:string;

ngOnChanges(changes: {[msg: string]: SimpleChange}) {
        alert('点击触发之后的onchang中msg是'+this.msg);
        if(this.msg=='PAT'){
            this.nodeService.getFiles().then(files => this.filesTree0 = files);
        }
        else if(this.msg=='PMT'){
            this.nodeService.gePmtFiles().then(files => this.filesTree0 = files);
        }
      }

nodeService及json数据可自行构建
自己琢磨有点慢，没关系，有进步就好