Angular2 之父子组件交互方式
父子组件交互方式,这里介绍主要的三种方式
1.事件传值
下面以列表页和分页组件举例。
list.component.html
<pagination *ngIf="pageParams?.total>0" [pageParams]="pageParams" (changePageData)="changePageData($event)"></pagination>
2 /* 这里的ngIf是为了控制total,当total从接口获取到了返回值以后再显示分页组件 */
list.component.ts
@Component({
templateUrl: './list.component.html'
})
export class ListComponent {
changePageData(event) {
this.pageParams = event;
this.getPageData() // 从分页组件获取page参数后重新获取list数据
}
}
pagination.component.html
import { Component, OnInit, OnChanges, Input, Output, EventEmitter } from '@angular/core';
@Component({
template: `<button (click)="nextPage()">点我下一页<`
})
export class PaginationComponent {
@Input() pageParams: any;
// EventEmitter是一个帮你实现观察者模式的对象,用于管理一系列订阅者并向其发布事件的对象
@Output() changePageData: EventEmitter<any> = new EventEmitter;
nextPage() {
this.pageParams.pageNo += 1;
this.changePageData.emit(this.pageParams) // 广播事件给父组件,触发父组件事件,可以emit参数过去
}
}
2.局部变量
下面使用简单的例子来说明模板局部变量的使用。
2.1.子组件childComponent
child.component.ts
import { Component } from '@angular/core';
@Component({
template: ``
})
export class ChildComponent {
show1(event) {
alert('从父组件传来的值是:'+event);
}
}
2.2.父组件parentComponent
parent.component.ts
import { Component } from '@angular/core';
@Component({
template: `
<button (click)="child.show1(str)">点我调用子组件事件</button>
<child-selector #child></child-selector>
`
})
export class ParentComponent {
str: string = '子组件你好!'
}
3.@ViewChild
Angular2 之父子组件交互方式的更多相关文章
- 三大前端框架(react、vue、angular2+)父子组件通信总结
公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...
- angular2 里父子组件传值的坑
1.如果传的是基本类型的值,子组件里改变该值,父组件无变化 2.如果传的是对象,子组件里改变对象里的变量,父组件会变化 3.如果传的是函数,this不会继续指向父组件对象了,如果需要this指向父组件 ...
- Angular2 父子组件通信方式
https://www.jb51.net/article/133868.htm 这次给大家带来Angular2 父子组件通信方式,使用Angular2 父子组件通信方式的注意事项有哪些,下面就是实战案 ...
- Angular06 组件、模块、父子组件之间的数据传递
1 创建组件 进入到angular项目的根目录,执行如下命令 ng g component test-component 注意:执行完上述命令后在angular项目的src/app文件夹下就会多出一个 ...
- 关于React的父子组件通信等等
//==================================================此处为父子组件通信 1.子组件调用父组件: 父组件将子组件需要调用方法存入props属性内,子组 ...
- 第四节:Vue表单标签和组件的基本用法,父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- Vue2.x中的父子组件相互通信
业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template ...
- React学习(一)父子组件通讯
React父子组件之间通讯,利用props和state完成,首先React是单向数据流,父组件可以向子组件传递props: 实现父子组件双向数据流整体的思路是: 1,父组件可以向子组件传递props, ...
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
随机推荐
- NOIP 2017 宝藏 - 动态规划
题目传送门 传送门 题目大意 (家喻户晓的题目不需要题目大意) 设$f_{d, s}$表示当前树的深度为$d$,与第一个打通的点连通的点集为$s$. 每次转移的时候不考虑实际的深度,深度都当做$d$, ...
- 2019年3月10日 装饰器进阶-模拟session
ser_dic={'username':None,'login':False}#用户字典,反应登入状态,用字典做全局变量 def idf(func):#验证登入信息是否正确 def wrapper(* ...
- Angular4基本网络请求get、post方式
1.在路径C:\AngularProject\AngularTest\src\app\app.module.ts这个文件下面引入 2.在需要用到的js文件引入 3.GET/POST 带参/不带参请求
- 安装Office2016遇到“无法流式传输Office”问题
安装Office2016遇到“无法流式传输Office”问题,请问如何解决 很抱歉,找不到所需的文件,请检查安装源是否可访问,然后再试. 错误代码:30068-39(2) ============== ...
- d3-tip中show在自己调用时需要改变this值
<script src="https://d3js.org/d3.v4.min.js"></script><script src="http ...
- WebPack打包后如何调试
作为一个程序员每天的大部分工作就是调试自己写的程序,那我们使用了webpack后,所以代码都打包到了一起,给调试带来了麻烦,但是webpack已经为我们充分考虑好了这点,它支持生产Source Map ...
- vue 组件之间相互传值 父传子 子传父
1.父传子 把要传入的值放到父标签里 子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...
- 闽南师范大学·大英A3复习专题
精读<新视野·读写教程A3> U2: words: TEXT A TEXT B appraise vt.评定 | abort vt.(因困难或危险)使(活动)终止 paralyze v ...
- Java 占位符
Java的占位符有两种:% 和 {} String 类对象 只能使用 % 有效. MessageFormat 类对象 只能使用 {} 有效. package demo; import java.tex ...
- Codeforces 741 D - Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths
D - Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths 思路: 树上启发式合并 从根节点出发到每个位置的每个字符的奇偶性记为每个位 ...