Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >【Angular】Angula6中的组件通信

【Angular】Angula6中的组件通信

作者头像
CloudCat
发布于 2019-05-26 12:06:03
发布于 2019-05-26 12:06:03
2K00
代码可运行
举报
运行总次数:0
代码可运行

Angula6_组件通信

本文主要介绍 Angular6 中的组件通信

一、父子组件通信

1.1 父组件向子组件传递信息

方法一 在父组件上设置子组件的属性

父组件绑定信息

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<app-child childTitle="可设置子组件标题"></app-child>

子组件接收消息

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { Component, OnInit, Input } from '@angular/core';
@Input childTitle: string;
方法二 父组件调用子组件的方法

父组件触发消息

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<app-child #child></app-child> <button (click)="child.childPrint()"></button>

子组件接收消息

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
childPrint() {
  alert("来自子组件的打印");
}

1.2 子组件向父组件传递信息

方法一 使用 EventEmitter

子组件使用 EventEmitter 传递消息

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
...
@Output() initEmit = new EventEmitter<string>();
ngOnInit() {
  this.initEmit.emit("子组件初始化成功");
}
...

父组件接收消息

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<app-child (initEmit)="accept($event)"></app-child>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
accept(msg:string) {
  alert(msg);
}
方法二 使用 ViewChild

子组件提供传递参数的函数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
sendInfo() {
  return 'Message from child 1.';
}

父组件使用 ViewChild 触发并接收信息

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<button (click)="getInfo()">获取子组件1号的信息</button>
<h2>{{ info }}</h2>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { Component, OnInit, ViewChild } from '@angular/core';
...
@ViewChild(ChildFirstComponent) private childcomponent: ChildFirstComponent;
getInfo() {
  this.info = this.childcomponent.sendInfo();
}

二、非父子组件通信

方法一 service

缺点:需要双向的触发(发送信息 / 接收信息)

service.ts

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { Component, Injectable, EventEmitter } from "@angular/core";
@Injectable()
export class myService {
  public info: string = "";
  constructor() {}
}

组件 1 向 service 传递信息

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { myService } from '../../service/myService.service';
...
constructor(
  public service: myService
) { }

changeInfo() {
  this.service.info = this.service.info + "1234";
}
...

组件 2 从 service 获取信息

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { myService } from '../../service/myService.service';
...
constructor(
  public service: myService
) { }

showInfo() {
  alert(this.service.info);
}
...

方法二 使用 BehaviorSubject

优点:真正的发布订阅模式,当数据改变时,订阅者也能得到响应

service

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { BehaviorSubject } from 'rxjs';
...
public messageSource = new BehaviorSubject<string>('Start');
changemessage(message: string): void {
  this.messageSource.next(message);
}

组件调用 service 的方法传信息和接收信息

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
changeInfo() {
  this.communication.changemessage('Message from child 1.');
}
ngOnInit() {
  this.communication.messageSource.subscribe(Message => {
    window.alert(Message);
    this.info = Message;
  });
}

三、其他的通信方式

  1. 路由传值
  2. cookie、session、storage

参考文献《Angular6.x 学习笔记——组件详解之组件通讯》 《angular6 组件间的交流方式》

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Angular 组件通信
上一篇,我们讲了 Angular 结合 NG-ZORRO 快速开发。前端开发,很大程度上是组件化开发,永远离不开组件之间的通信。那么,在 Angular 开发中,其组件之间的通信是怎么样的呢?
Jimmy_is_jimmy
2022/04/15
2K0
Angular 从入坑到挖坑 - 组件食用指南
angular 入坑记录的笔记第二篇,介绍组件中的相关概念,以及如何在 angular 中通过使用组件来完成系统功能的实现
程序员宇说
2020/02/25
16K0
Angular 从入坑到挖坑 - 组件食用指南
angular4父组件向子组件传值,子组件向父组件传值的方法
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/141665.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/24
2.8K0
angular4父组件向子组件传值,子组件向父组件传值的方法
Angular开发实践(四):组件之间的交互
在Angular应用开发中,组件可以说是随处可见的。本篇文章将介绍几种常见的组件通讯场景,也就是让两个或多个组件之间交互的方法。 根据数据的传递方向,分为父组件向子组件传递、子组件向父组件传递及通过服务传递三种交互方法。 父组件向子组件传递 子组件通过@Input装饰器定义输入属性,然后父组件在引用子组件的时候通过这些输入属性向子组件传递数据,子组件可通过setter或ngOnChanges()来截听输入属性值的变化。 先定义两个组件,分别为子组件DemoChildComponent和父组件DemoPare
laixiangran
2018/04/11
3.4K0
angular知识点梳理第三篇-组件
> 这里我是有些偷懒的,因为我看了官网的解释以后,我自己不太能知道怎么再使用我自己的语言重新给你们描述一次,你们可以选择直接看我的这个demo,简单暴力,也可以选择看一下官方的解释,本身就是白话文,所以就没有翻译的必要了。angular生命周期
何处锦绣不灰堆
2022/05/09
2.3K0
angular知识点梳理第三篇-组件
【Angular教程】-组件通信|8月更文挑战
上一篇我们初步了解的Angular中组件及基本的使用,但是所有的功能要是放到一个组件里面必然显得更加冗余,臃肿,我们通常会将组件按照一定的规则进行拆分,拆分后的组件免不了的就需要进行通信,这一篇我们就来一起熟悉一下Angular中的组件通信吧。
前端小鑫同学
2022/12/25
4740
【Angular教程】-组件通信|8月更文挑战
angular组件的基本使用
angular组件的基本使用 组件 组件模板 ng generate component xxx 新建组件(大驼峰命名) 属性绑定 <img [src]="imgSrc" /> public imgSrc:string="./assets/imgs/1.jpg"; 事件绑定 <button class="btn btn-success" (click)="btnClick($event)">测试事件</button> public btnClick(event):void{ alert
一个淡定的打工菜鸟
2022/08/23
1.6K0
angular父子组件传值
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/145508.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/27
8900
Angular核心-父子间组件传递数据-重难点
Vue.js和Angular中的父子间消息传递原理一样,都可以用口诀:“Props Down,Event Up”
用户9857551
2022/06/28
1.3K0
Angular 6.x 基础教程
若想进一步了解 Angular CLI 的详细信息,请参考 Angular CLI 终极指南。
阿宝哥
2019/11/05
15.8K0
详解ANGULAR2组件中的变化检测机制(对比ANGULAR1的脏检测)
组件和变化检测器 如你所知,Angular 2 应用程序是一颗组件树,而每个组件都有自己的变化检测器,这意味着应用程序也是一颗变化检测器树。顺便说一句,你可能会想。是由谁来生成变化检测器?这是个好问题,它们是由代码生成。 Angular 2 编译器为每个组件自动创建变化检测器,而且最终生成的这些代码 JavaScript VM友好代码。这也是为什么新的变化检测是快速的 (相比于 Angular 1.x 的 $digest)。基本上,每个组件可以在几毫秒内执行数万次检测。因此你的应用程序可以快速执行,而无需调
前朝楚水
2018/04/03
3K0
angular子组件传值到父组件_vue子组件传值给父组件
step1: D:\vue\untitled2901\src\app\app.component.ts
全栈程序员站长
2022/10/04
2.8K0
Angular快速学习笔记(3) -- 组件与模板
1. 显示数据 在 Angular 中最典型的数据显示方式,就是把 HTML 模板中的控件绑定到 Angular 组件的属性。 使用插值表达式显示组件属性 要显示组件的属性,最简单的方式就是通过插值表达式 (interpolation) 来绑定属性名。 要使用插值表达式,就把属性名包裹在双花括号里放进视图模板,如 {{myHero}}。 import { Component } from '@angular/core'; @Component({ selector: 'app-root', te
JadePeng
2018/05/28
15.5K0
React中组件通信的几种方式
React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息 Child.jsx
木子星兮
2020/07/16
2.3K0
AngularDart 4.0 高级-生命周期钩子 顶
Angular创建它,渲染它,创建和渲染它的子项,在数据绑定属性发生变化时对其进行检查,并在将它从DOM中删除之前对其进行销毁。
南郭先生
2018/08/14
6.4K0
AngularDart 4.0 高级-生命周期钩子
                                                    顶
Angular constructor vs ngOnInit
在 Angular 学习过程中,相信很多初学者对 constructor 和 ngOnInit 的应用场景和区别会存在困惑,本文我们会通过实际的例子,为读者一步步解开困惑。
阿宝哥
2019/11/06
1.5K0
Angular 2 版本的 ng-bootstrap 初体验
最近 angular-ui 团队终于正式发布了基于 Angular 2 的 Bootstrap 界面库 ng-bootstrap , 工作中一直用 AngularJS 1.x 的 UI Bootstrap , 因此对这个 ng-bootstrap 也是很感兴趣, 第一时间进行试用。
beginor
2020/08/10
1.6K0
Angular 2 版本的 ng-bootstrap 初体验
Angular 动态创建组件
上面代码中,我们定义了一个简单的 AlertComponent 组件,该组件有一个输入属性 type ,用于让用户自定义提示的类型,此外还包含了一个输出属性 output,用于向外部组件输出信息。我们的自定义组件最终是一个实际的 DOM 元素,因此如果我们需要在页面中插入该元素,我们就需要考虑在哪里放置该元素。
阿宝哥
2019/11/05
3.8K0
使用angular4和asp.net core 2 web api做个练习项目(三)
下面将开发登陆和授权的部分, 这里要用到identity server 4. 在VS解决方案中设置多个项目同时启动: AspNetIdentityAuthorizationServer就是author
solenovex
2018/03/01
1.4K0
使用angular4和asp.net core 2 web api做个练习项目(三)
angular面试题及答案_angular面试
ngAfterContentInit:当把内容投影进组件之后调用,第一次调用ngDocheck()之后调用,只调用一次,只适用于组件
全栈程序员站长
2022/11/02
11.6K0
相关推荐
Angular 组件通信
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验