我们可以通过以下三种方式来实现:

  1. 传递一个组件的引用给另一个组件
  2. 通过子组件发送EventEmitter和父组件通信
  3. 通过serive通信

1. 传递一个组件的引用给另一个组件

Demo1 模板引用变量

模板引用变量通常用来引用模板中的某个 DOM 元素,它还可以引用 Angular 组件或指令或Web Component。 
使用井号 (#) 来声明引用变量。 #phone 的意思就是声明一个名叫 phone 的变量来引用 元素

这种方式适合组件间有依赖关系。 app component

<app-side-bar-toggle [sideBar]="sideBar"></app-side-bar-toggle>
<app-side-bar #sideBar></app-side-bar>

app.component.html

@Component({
selector: 'app-side-bar-toggle',
templateUrl: './side-bar-toggle.component.html',
styleUrls: ['./side-bar-toggle.component.css']
})
export class SideBarToggleComponent { @Input() sideBar: SideBarComponent; @HostListener('click')
click() {
this.sideBar.toggle();
}
}

side-bar-toggle.component.ts

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
sideBarIsOpened = false; toggleSideBar(shouldOpen: boolean) {
this.sideBarIsOpened = !this.sideBarIsOpened;
}
}

2. 通过子组件发送EventEmitter和父组件通信

Demo2 这种方式利用事件传播,需要在子组件中写 app.component.html

<app-side-bar-toggle (toggle)="toggleSideBar()"></app-side-bar-toggle>
<app-side-bar [isOpen]="sideBarIsOpened"></app-side-bar>

app.component.ts

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
sideBarIsOpened = false; toggleSideBar(shouldOpen: boolean) {
this.sideBarIsOpened = !this.sideBarIsOpened;
}
}

side-bar-toggle.component.ts

@Component({
selector: 'app-side-bar-toggle',
templateUrl: './side-bar-toggle.component.html',
styleUrls: ['./side-bar-toggle.component.css']
})
export class SideBarToggleComponent { @Output() toggle: EventEmitter<null> = new EventEmitter(); @HostListener('click')
click() {
this.toggle.emit();
}
}

side-bar.component.ts

@Component({
selector: 'app-side-bar',
templateUrl: './side-bar.component.html',
styleUrls: ['./side-bar.component.css']
})
export class SideBarComponent { @HostBinding('class.is-open') @Input()
isOpen = false;
}

3. 通过service进行通信

Demo3 这里需要新建side-bar.service,我们把toggle方法写到service文件中, 然后将service注入到side-bar-toggle.component和side-bar-toggle.component,前者调用toggle方法,发送事件流,后者订阅事件

app.component.html

<app-side-bar-toggle></app-side-bar-toggle>
<app-side-bar></app-side-bar>

side-bar-toggle.component.ts

@Component({
selector: 'app-side-bar-toggle',
templateUrl: './side-bar-toggle.component.html',
styleUrls: ['./side-bar-toggle.component.css']
})
export class SideBarToggleComponent { constructor(
private sideBarService: SideBarService
) { } @HostListener('click')
click() {
this.sideBarService.toggle();
}
}

side-bar.component.ts

@Component({
selector: 'app-side-bar',
templateUrl: './side-bar.component.html',
styleUrls: ['./side-bar.component.css']
})
export class SideBarComponent { @HostBinding('class.is-open')
isOpen = false; constructor(
private sideBarService: SideBarService
) { } ngOnInit() {
this.sideBarService.change.subscribe(isOpen => {
this.isOpen = isOpen;
});
}
}

side-bar.service.ts

@Injectable()
export class SideBarService { isOpen = false; @Output() change: EventEmitter<boolean> = new EventEmitter(); toggle() {
this.isOpen = !this.isOpen;
this.change.emit(this.isOpen);
}
}
												

Angular 组件通信的三种方式的更多相关文章

  1. 黑马vue---56-58、vue组件创建的三种方式

    黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...

  2. Vue组件之间通信的三种方式

    最近在看梁颠编著的<Vue.js实战>一书,感觉颇有收获,特此记录一些比价实用的技巧. 组件是MVVM框架的核心设计思想,将各功能点组件化更利于我们在项目中复用,这类似于我们服务端面向对象 ...

  3. 容器间通信的三种方式 - 每天5分钟玩转 Docker 容器技术(35)

    容器之间可通过 IP,Docker DNS Server 或 joined 容器三种方式通信. IP 通信 从上一节的例子可以得出这样一个结论:两个容器要能通信,必须要有属于同一个网络的网卡. 满足这 ...

  4. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  5. Vue自定义组件以及组件通信的几种方式

    本帖子来源:小贤笔记 功能 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它 ...

  6. React: React组件创建的三种方式

    一.简介 在前面介绍的React组件知识中,对于组件的创建我只是用了其中某一种方式.其实,在2013年React诞生之初,对于React组件的创建,仅仅只有一种方式,也即createClass函数,在 ...

  7. React中组件通信的几种方式

    https://segmentfault.com/a/1190000012361461 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 ...

  8. VC 线程间通信的三种方式

    1.使用全局变量(窗体不适用)     实现线程间通信的方法有很多,常用的主要是通过全局变量.自定义消息和事件对象等来实现的.其中又以对全局变量的使用最为简洁.该方法将全局变量作为线程监视的对象,并通 ...

  9. 【转】VC 线程间通信的三种方式

    原文网址:http://my.oschina.net/laopiao/blog/94728 1.使用全局变量(窗体不适用)      实现线程间通信的方法有很多,常用的主要是通过全局变量.自定义消息和 ...

随机推荐

  1. zabbix 监控redis 挂掉自动重启 并发送企业微信

    1.创建redis监控项[配置]-[主机]-[监控项]-创建监控项,监控6379端口(注意关闭防火墙或者开启防火墙端口6379) redis配置文件设置允许任何地址监听: 添加监控项 2.创建redi ...

  2. AppScan 10安装使用

    一.简介 AppScan是IBM的一款web安全扫描工具,具有利用爬虫技术进行网站安全渗透测试的能力,能够根据网站入口自动摸取网页链接进行安全扫描,提供了扫描.报告和修复建议等功能. appscan有 ...

  3. google-chrome 启动报错 nss_util.cc(627)] NSS_VersionCheck("3.26") failed. NSS >= 3.26 is required

    一.错误情况 报错如下: [0807/144244.712736:FATAL:nss_util.cc(627)] NSS_VersionCheck("3.26") failed. ...

  4. feignclient各种使用技巧说明

    FeignClient常见用法 常规的FeignClient的创建与使用我相信只要使用过spring cloud全家桶的套件的基本上都是非常熟悉了,我们只需定义一个interface,然后定义相关的远 ...

  5. FZU ICPC 2020 寒假训练 4 —— 模拟(一)

    P1042 乒乓球 题目背景 国际乒联现在主席沙拉拉自从上任以来就立志于推行一系列改革,以推动乒乓球运动在全球的普及.其中11分制改革引起了很大的争议,有一部分球员因为无法适应新规则只能选择退役.华华 ...

  6. Python进阶(多线程)

    多线程结构 import threading def worker():#子线程要执行的具体逻辑代码函数 print('threading') t1 = threading.current_threa ...

  7. jenkins安装与配置---window,mis包直接安装

    https://my.oschina.net/aibinxiao/blog/1457218 Jenkins在Windows下的安装与配置   已经在https://jenkins.io/下载好了Win ...

  8. 菜鸡的Java笔记第二 - java 数据类型

    1.程序的本质实际上就是在于数据的处理上. JAVA中的数据类型有两类 基本数据类型:是进行内容的操作而不是内存的操作 数值型: 整型:byte(-128 ~ 127),short(-32768 ~ ...

  9. CTF入门学习3->Web通信基础

    Web安全基础 01 Web通信 这个部分重点介绍浏览器与Web服务器的详细通信过程. 01-00 URL协议 只要上网访问服务器,就离不开URL. URL是什么? URL就是我们在浏览器里输入的站点 ...

  10. [loj2091]小星星

    (分别用$E_{T}$和$E_{G}$表示树和图的边集) 简单分析,可以发现题目即求排列$p_{i}$的数量,满足$\forall (x,y)\in E_{T},(p_{x},p_{y})\in E_ ...