angular 子父页面传值以及调用方法

子页面调用父页面方法：通过方法，将父页面方法传递给子页面。直接上代码

父页面html：
<p-dialog [header]="dialogTitle" [(visible)]="display"  [draggable]="false"><app-attribute-constraint-add (closeDialog)="closeDialog()"></app-attribute-constraint-add>
</p-dialog>

父页面ts：直接写方法即可

closeDialog(){this.display=false;this.query(1, this.pageSize);
}

子页面页面ts：

@Output()
closeDialog:EventEmitter<any> = new EventEmitter(); //准备用它来发射事件接下来哪里需要调用方法  直接this.closeDialog.emit();

下面是父页面向子页面传值的问题：通过方法进行传值

父页面html：
<p-dialog [header]="dialogTitle" [(visible)]="display" [draggable]="false">

<app-attribute-constraint-add #attribute></app-attribute-constraint-add>

</p-dialog>

父页面ts:

@ViewChild('attribute')
attribute:AttributeConstraintAddComponent;

需要传值的时直接赋值，这里的passValue（）方法，为子页面方法: this.attribute.passValue({...param,flag: flag});

子页面接收

子页面ts：

passValue(data){console.log(data);}

其中data就是父页面传给子页面的值。

这是近几天写页面是遇到的问题。

一个页面向另一个页面传值：

传值页面html：

<app-product-part-attr [addPartConfig]="passChildValue"></app-product-part-attr>

传值页面ts：passChildValue: any;
接下来赋值就好，例：this.passChildValue = {...queryParams};

接收页面ts：这里的addPartConfig 就是传值页面[addPartConfig]中的。

@Input()
addPartConfig;

angular 子父页面传值以及调用方法相关推荐

window.parent方法获取父页面属性或者调用方法
父页面: <script type="text/javascript">var serviceType = "服务类型"; </script& ...
JS备忘--子父页面获取元素属性、显示时间，iframe之间互相调用函数
//页面加载完成后执行$(function() { getHW();});//当用户改变浏览器大小改变时触发$(window).resize(function() { setHW(); });//每5 ...
iframe子页面调用父页面javascript函数的方法
1.iframe子页面调用父页面js函数子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...
js代码父页面调用子页面中的js方法，子页面调用父页面中的js方法
文中代码亲测可用,转载以示尊重!!!  <script type="text/javascript"> //调用子页面的方法 ...
父组件给子组件传值方法_【Vue】小学生都能看懂的子父组件传值
Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,其中之一就是组件的传值. 搭建的框架目录结构一.父传子动图效果及源码父传子源码: 父组件: 子组件: 二.子传父动 ...
mui中子页面标志html,MUI 图标筛选切换（父页面传值子页面）代码
父页面: index.html var detailPage = null; //添加切换样式的点击事件 mui('.tab_layout').on('tap', 'a', function(e) { ...
Vue 进阶组件实战应用 -- 父子组件传值的应用实例（子父组件传值的两种触发方式）
基础的子组件和父组件通信已经搞定了,可以看此博客父子组件传值基础应用需求现在需求是在一个父页面引用子组件,不只是要实现基本的父子组件传值.并且子组件给父组件传值的触发条件要在父页面触发. 目前小 ...
data怎么给echart传值_通用技术 VUE 子父组件传值
为啥这点东西需要一周时间: 1.首先是水平一般,能力有限,前后端都是半吊子,再加上最近有点松劲了: 2.由于前期规划问题,在做质量统计的时候,需要做大量的数据整理.统计工作. 3.将前端的Echart ...
父子页面iframe相互调用方法详解
2019独角兽企业重金招聘Python工程师标准>>> 如果你采用嵌入iframe机制,不可避免的要用到各个iframe页面之间方法和属性的相互调用.这里介绍的是兼容各个浏览器的if ...
window.open 打开vue路由，并监听页面关闭事件，监听子父页面消息传递
name:路由 query:传递参数 const page2 = this.$router.resolve({name:'addHs',query:{hsCode:row.hsCode}}); var ...

angular 子父页面传值以及调用方法

angular 子父页面传值以及调用方法相关推荐

最新文章

热门文章