父子组件交互方式,这里介绍主要的三种方式

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 之父子组件交互方式的更多相关文章

  1. 三大前端框架(react、vue、angular2+)父子组件通信总结

    公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...

  2. angular2 里父子组件传值的坑

    1.如果传的是基本类型的值,子组件里改变该值,父组件无变化 2.如果传的是对象,子组件里改变对象里的变量,父组件会变化 3.如果传的是函数,this不会继续指向父组件对象了,如果需要this指向父组件 ...

  3. Angular2 父子组件通信方式

    https://www.jb51.net/article/133868.htm 这次给大家带来Angular2 父子组件通信方式,使用Angular2 父子组件通信方式的注意事项有哪些,下面就是实战案 ...

  4. Angular06 组件、模块、父子组件之间的数据传递

    1 创建组件 进入到angular项目的根目录,执行如下命令 ng g component test-component 注意:执行完上述命令后在angular项目的src/app文件夹下就会多出一个 ...

  5. 关于React的父子组件通信等等

    //==================================================此处为父子组件通信 1.子组件调用父组件: 父组件将子组件需要调用方法存入props属性内,子组 ...

  6. 第四节:Vue表单标签和组件的基本用法,父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  7. Vue2.x中的父子组件相互通信

    业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template ...

  8. React学习(一)父子组件通讯

    React父子组件之间通讯,利用props和state完成,首先React是单向数据流,父组件可以向子组件传递props: 实现父子组件双向数据流整体的思路是: 1,父组件可以向子组件传递props, ...

  9. Vue 非父子组件通信

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...

随机推荐

  1. GoldenGate HANDLECOLLISIONS参数使用说明

    HANDLECOLLISIONS在官方文档上的说明: 使用HANDLECOLLISIONS和NOHANDLECOLLISIONS参数来控制在目标上应用SQL时,Replicat是否尝试解决重复记录和缺 ...

  2. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  3. MTK-TP(触屏)解读一

    MTK中的TP代码结构并不复杂,相比于其他的系统更为的简单些.它使用的是input子系统,通过该系统来上报触摸按键. 首先我们来看看TP的文件夹下的各代码文件的功能. 文件名 具体功能 关系文件 tp ...

  4. 1.5:Unity Render Pipeline

    文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 这一节主要是为上一节中没有提到的一些概念作补充. 上一节提到了Unity中 ...

  5. Laravel资源路由

    Route::resource('article', 'ArticleController'); 如果我们以get的方式请求‘article’,会自动分发到ArticleController的crea ...

  6. axure原型设计

    在上一个学期的学习中,我们已经初步学习了axure的使用方法,它可以为负责定义需求设计,功能和界面的人员能快速设计出所需产品. 引入:在我们想为软件设计原型的时候,纸质原型很难表达交互的界面,与此同时 ...

  7. docker17.03.2安装

    之前安装过docker 卸载 yum -y remove docker docker-common docker-selinux docker-engine docker-engine-selinux ...

  8. 访问github慢的解决方案

    问题描述 打开https://github.com很慢. 解决办法 1.打开文件C:\Windows\System32\drivers\etc\hosts 2.添加如下内容: 151.101.44.2 ...

  9. springmvc学习之jdk版本,tomcat版本,spring版本

    使用的软件是myeclipse2018,jdk8,tomcat9.0,spring3.2.0 以上为我的软件及各种配置 1.建立了web工程,build path 使用的是默认的j2EE1.8(只有配 ...

  10. Kotlin 数据类与密封类

    数据类 Kotlin 可以创建一个只包含数据的类,关键字为 data: data class User(val name: String, val age: Int) 编译器会自动的从主构造函数中根据 ...