Angular父子组件通过服务传参
今天在使用ngx-translate做多语言的时候遇到了一个问题,需要在登录页面点击按钮,然后调用父组件中的一个方法。 一开始想到了@input和@output,然而由于并不是单纯的父子组件关系,而是包含路由的父子组件关系,所以并不能使用@input方法和@output方法。 然后去搜索一下,发现stackoverflow上有答案,用的是service来进行传参,发现很好用,所以和大家分享一下。
首先,创建一个service.
shared-service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class SharedService {// Observable string sourcesprivate emitChangeSource = new Subject<any>();// Observable string streamschangeEmitted$ = this.emitChangeSource.asObservable();// Service message commandsemitChange(change: any) {this.emitChangeSource.next(change);}
}//
欢迎加入全栈开发交流群一起学习交流:864305860
复制代码
然后把这个service分别注入父组件和子组件所属的module中,记得要放在providers里面。
然后把service再引入到父子组件各自的component里面。
子组件通过onClick方法传递参数:
child.component.ts
import { Component} from '@angular/core';
@Component({templateUrl: 'child.html',styleUrls: ['child.scss']
})
export class ChildComponent {constructor(private _sharedService: SharedService) { }
onClick(){this._sharedService.emitChange('Data from child');}
}
复制代码
父组件通过服务接收参数:
parent.component.ts
import { Component} from '@angular/core';
@Component({templateUrl: 'parent.html',styleUrls: ['parent.scss']
})
export class ParentComponent {constructor(private _sharedService: SharedService) {_sharedService.changeEmitted$.subscribe(text => {console.log(text);});}
}
复制代码
本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。 对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。 最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。
Angular父子组件通过服务传参相关推荐
- Vue组件之间的传参方式小总结
学习vue的组件,可能很多人已经了解了组件的创建注册使用,但是随之而来的就是组件之间的通信,父子组件怎么传? 兄弟组件怎么传? 不是父子组件又怎么传? 接下来介绍几种组件之间的传参方式,也是很容易面试 ...
- Angular+PrimeNg 分页器给后端传参分页
Angular+PrimeNg 分页器给后端传参分页 文章目录 Angular+PrimeNg 分页器给后端传参分页 一.导入分页器 二.分页器显示 三.传输某页请求给后端 一.导入分页器 app.m ...
- vue组件之间的传参总结
之前写的Vue 子父组件间的传值_WeiflR10的博客-CSDN博客 一.父传子(prop) 第一步:在父组件中定义数据,例:tohome data () {return {tohome:" ...
- Angular父子组件传值
Angular父子组件传值 1 父组件向子组件传值 1 子组件操作 2 父组件操作 1 在ts文件中定义被传递的变量 2 在html文件绑定 2 子组件向父组件传值 1 子组件操作 2 父组件操作 1 ...
- 快速创建Angular组件并定义传参、绑定自定义事件的方法
为了方便创建Component,请自行安装插件 接下来就是创建组件需要绑定入参in和事件out(用于输出参数) 运行效果如下(可以点击红色文字,就获取到了子组件传出的内容)
- Angular 父子组件传值,非父子组件传值
一.子组件调用父组件,父组件给子组件传值 引入Input header.component.ts import { Component, OnInit, Input, Output } from '@ ...
- Vue子组件调用父组件方法并传参的5种方式:$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
如需了解老子怎么控制儿子的,传送门:https://s-z-q.blog.csdn.net/article/details/119922715 子组件child.vue <template> ...
- angular 父子组件通信
父子组件通信传值的方式有三种:@Input,@Output,@ViewChild.按照顺序来分享各自的不同: 一:@Input方式(可以传值不传方法,父传子) 1,传值.我总结为:申明---绑定--- ...
- React自定义组件使用onClick传参注意:onClick只是一个名字而已!
核心: React自定义组件不是真实DOM,所以没有onClick属性, 如果对React自定义组件写上onClick,也只是个单纯的名字而已,onClick的值作为props传到子组件. 例如: f ...
最新文章
- svn 代码管理工具
- JSP自定义标签渲染时报Illegal to flush错误
- ps一点等于多少厘米_企业展厅设计关于展台你了解多少?
- windows动态库和静态库VS导入
- mysql typedefinition_深入浅出Mysql——基础篇
- Silverlight/WPF中DependencyProperty使用陷阱一枚
- 学python有前途吗-2019年转行学Python有还前途吗?如何学习Python?
- 如何在ecshop订单中显示客户给商家的留言
- Deming质量管理14点
- pycharm连接SqlServer数据库
- 权重分析——CRITIC权重法
- coreldraw水涟漪怎么做_巧用CorelDRAW X7制作波纹效果文字
- 区块链对人工智能的变革:去中心化将带来数据新范式
- 自媒体人必看,这些无版权背景音乐网站,免费下载
- C#dgv调用数据中存储的路径来显示图片
- 系统管理之Systemd详解(centos7)
- 前端——使用JavaScript(jQuery)通过身份证号获取籍贯、生日、年龄、性别
- Shopee店铺没有流量?3步教你如何诊断店铺
- NLP:Word Embedding词嵌入/word2vec词向量思想方法(一种主流的分布式表示)的简介、使用方法、案例应用之详细攻略
- 获取 Windows 任务管理器中应用程序和进程 任务