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

  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. 前端面试手写代码——call、apply、bind

    1 call.apply.bind 用法及对比 1.1 Function.prototype 三者都是Function原型上的方法,所有函数都能调用它们 Function.prototype.call ...

  2. Mybatis的分页插件com.github.pagehelper

    1. 需要引入PageHelper的jar包 如果没有使用maven,那直接把jar包导入到lib文件夹下即可,这个PageHelper插件在github上有开源, 地址为:https://githu ...

  3. python教程-(三)使用字符串

    一.设置字符串的格式:精简版 方法1 >>> format = "Hello %s, welcome to %s" >>> values = ( ...

  4. oracle 架构和一些工具了解

    oracle的架构大概分为3部分, 客户端:用户端 oracle instance:叫做实例,由内存结构(内存池或者叫SGA)和后台进程组成.Oracle Instance是Oracle RDBMS的 ...

  5. Oracle 整库备份还原

    http://www.mamicode.com/info-detail-2481866.html sql语句 system用户登陆 查看表空间和存放位置 select t1.name,t2.name ...

  6. Oracle四大语言DDL DML DCL TCL

    DDL(数据定义语言) creater 创建数据表 ceater table 表名 (); alter 修改表结构 添加字段:alter table 表名 add 列名 数据类型 null 删除字段: ...

  7. axios 基于拦截器的取消(重复)请求

    axios 基于拦截器的取消(重复)请求 // 添加请求拦截器 axios.interceptors.request.use((config) => { // 准备发请求之前, 取消未完成的请求 ...

  8. pyinstaller设置图标出现“struct.error: unpack requires a buffer of 16 bytes”

    pyinstaller设置图标出现"struct.error: unpack requires a buffer of 16 bytes" 直接用png图片改后缀名为ico,然后p ...

  9. Vue.js教程 1.前端框架学习介绍

    Vue.js教程 1.前端框架学习介绍 什么是Vue.js 为什么要学习流行框架 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站, ...

  10. ndarray 数组的创建和变换

    ndarray数组的创建方法 1.从python中的列表,元组等类型创建ndarray数组 x = np.array(list/tuple) x = np.array(list/tuple,dtype ...