位置: 编程技术 - 正文

angular中不同的组件间传值与通信的方法(angular的ngif)

编辑:rootadmin

推荐整理分享angular中不同的组件间传值与通信的方法(angular的ngif),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:angular implements,angular implements,angular implements,angular的ngclass,angular例子,angular ngchange,angular例子,angular使用,内容如对您有帮助,希望把文章链接给更多的朋友!

本文主要介绍angular在不同的组件中如何进行传值,如何通讯。主要分为父子组件和非父子组件部分。

父子组件间参数与通讯方法

使用事件通信(EventEmitter,@Output):

场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件;

步骤:

子组件创建事件EventEmitter对象,使用@output公开出去; 父组件监听子组件@output出来的方法,然后处理事件。

代码:

使用@ViewChild和@ViewChildren:

场景:一般用于父组件给子组件传递信息,或者父组件调用子组件的方法;

步骤:

父组件里面使用子组件; 父组件里面使用@ViewChild获得子组件对象。 父组件使用子组件对象操控子组件;(传递信息或者调用方法)。

代码:

非父子组件参数传递与通讯方法

通过路由参数

场景:一个组件可以通过路由的方式跳转到另一个组件 如:列表与编辑

步骤:

A组件通过routerLink或router.navigate或router.navigateByUrl进行页面跳转到B组件 B组件接受这些参数angular中不同的组件间传值与通信的方法(angular的ngif)

此方法只适用于参数传递,组件间的参数一旦接收就不会变化

代码

传递方式

routerLink

router.navigate

router.navigateByUrl

传参方传参之后,接收方2种接收方式如下:

snapshot

queryParams

使用服务Service进行通信,即:两个组件同时注入某个服务

场景:需要通信的两个组件不是父子组件或者不是相邻组件;当然,也可以是任意组件。

步骤:

新建一个服务,组件A和组件B同时注入该服务; 组件A从服务获得数据,或者想服务传输数据 组件B从服务获得数据,或者想服务传输数据。

代码:

消息服务模块

场景:这里涉及到一个项目,里面需要实现的是所有组件之间都有可能通信,或者是一个组件需要给几个组件通信,且不可通过路由进行传参。

设计方式:

使用RxJs,定义一个服务模块MessageService,所有的信息都注册该服务; 需要发消息的地方,调用该服务的方法; 需要接受信息的地方使用,调用接受信息的方法,获得一个Subscription对象,然后监听信息; 当然,在每一个组件Destory的时候,需要

代码:

这里的MessageService,就相当于使用广播机制,在所有的组件之间传递信息;不管是数字,字符串,还是对象都是可以传递的,而且这里的传播速度也是很快的。

标签: angular的ngif

本文链接地址:https://www.jiuchutong.com/biancheng/375866.html 转载请保留说明!

上一篇:Vue全家桶实践项目总结(推荐)(vue全家桶包含哪些)

下一篇:vue+node+webpack环境搭建教程

  • 设备检验检测
  • 高速公路费如何冲抵
  • 差旅费包括哪些费用
  • 对公账户转账给法人用途写什么
  • 一正一负发票是什么意思
  • 缴纳销项税额要交税吗
  • 手撕定额发票不是免税怎么还报税
  • 人力资源服务费税收编码
  • 印花税已经缴纳了但是还未申报
  • 购买软件能直接用吗
  • 利息收入增值税计税依据
  • 建筑公司材料费属于什么科目
  • 跨年度错账更正方法
  • 二手房土地年限是多少年
  • 一般纳税人增票流程
  • 企业在国内采购并运往境外作为投资的货物
  • 持有至到期投资科目被取消了吗
  • 内部员工购买公司产品
  • 上年计提的费用往来,能冲回吗
  • 养殖专业合作社业务范围包括哪些
  • win10任务栏向上的箭头不见了
  • 最新早上好图片大全集
  • 收到退回款项
  • 计提职工薪酬怎么算
  • php对称加密算法实验报告
  • win11 恢复
  • PHP:Memcached::__construct()的用法_Memcached类
  • vericut9.0环境变量
  • 财务报表中固定资产清理为什么加借方余额
  • vue中computed作用
  • php数组怎么实现的
  • 如何在最新版本钉钉上使用支付审申请
  • 中国烟草资产负债表
  • 运输发票备注栏里一般需要备注的内容包括
  • switch关键账号教程
  • http上传错误
  • python命令行进度条
  • 小规模纳税人的条件
  • 资产报废的原因及情况说明
  • 交易性金融资产的入账价值
  • 辅助生产车间工人工资计入
  • 长期股权投资的交易费用计入哪里
  • 销售成本是付现成本吗
  • 企业间借款利息可以开专票吗
  • 去年留抵税额会计分录
  • 新公司成立的文案
  • 怎么盘存货
  • 进项税额与库存的关系
  • 预付账款没有收到货怎么处理
  • 房屋租赁费计入什么会计科目
  • 小规模企业税金怎么做账
  • 人们对餐饮业的要求
  • 国内旅客运输票据可以抵扣进项税吗
  • win8.1无法连接无线网
  • macbookpro双系统和虚拟机
  • windows xp玩游戏
  • mac闹钟app
  • winlogon是什么意思
  • windowsxp服务在哪里
  • ubuntu命令行查找文件
  • 部分用户开启隐私,暂时无法查看怎么办
  • gcuservice.exe
  • win8怎么样的
  • schupd.exe - schupd是什么进程 有什么用
  • ssh登录报错
  • win7任务栏怎么全部显示出来
  • win10 系统优化
  • win10开机显示recover
  • cocos2dx4.0入门
  • unity游戏之友利拟收购《刀塔传奇》发行商中清龙图
  • css的reset
  • jquery的插件
  • android适配器是什么意思
  • android中的webview
  • javascript基础类型
  • 广告费属于什么会计科目
  • 山东济南税务局投诉电话
  • 个人所得税法实施条例2011
  • 国家税务总局上海税务局(个人)
  • 税务局看场地要给红包吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设