目录
1 前言
2 Angular 组件间的通讯
2.1 父子组件间的通讯
2.1.1 父组件设置子组件属性
2.1.2 父组件调用子组件事件
2.1.3 子组件向父组件发射事件
2.2 非父子组件通讯
2.2.1 Service
2.2.2 路由传值
2.2.2.1 传递一个值
2.2.2.2 传递一个对象
3 通用方式实现通讯
3.1 localStorage
3.2 服务端
4 结语
1 前言
前端框架, 例如 extjs,vue,angular 等, 都是或趋于组件化, 所以组件间的通讯, 是一个亟需解决的问题
一般而且言, 这些组件之间都会形成这种树形结构
组件之间会有下列 3 种关系:
1 父子关系
2 兄弟关系
3 没有直接关系
通常采用下列方式处理 (某些方式是框架特有) 组件间的通讯, 如下:
1 父子组件之间的交互(@Input/@Output / 模板变量 /@ViewChild)
2 非父子组件(Service/localStorage)
3 还可以利用 Session 等服务器端的解决方法
2Angular 组件间的通讯
2.1 父子组件之间的通讯
在父子组件之间通讯:
@Input: 是属性绑定, 父组件向子组件传递数据
@Output: 是事件绑定, 子组件向父组件传递数据的同时触发事件
2.1.1 在父组件设置子组件上面的的属性
通过 @input 绑定子组件的属性, 注意属性得是公开 public 的, 私有 private 属性是无法传递的
es6 新语法 get/set. 为属性提供了一个方便习惯的读 / 写方式, 拦截属性的存取行为.
在父组件设置该属性, 就能够通过 set 方法来修改, 从而实现在父组件设置子组件属性
代码如下
1 <h1>{{childTitle}}</h1>
子组件模板文件
- import { Component, OnInit, Input } from '@angular/core';
- @Component({
- selector: 'app-child',
- templateUrl: './child.component.html',
- styleUrls: ['./child.component.sass']
- })
- export class ChildComponent implements OnInit {
- private _childTitle: string = '子组件标题';
- @Input()
- set childTitle(childTitle: string) {
- this._childTitle = childTitle;
- }
- get childTitle(): string {
- return this._childTitle;
- }
- constructor() { }
- ngOnInit() {
- }
- }
子组件 Ts 文件
- <p>
- parent-and-child works!
- </p>
- <app-child childTitle="可设置子组件标题"></app-child>
父组件模板文件
- import { Component, OnInit } from '@angular/core';
- @Component({
- selector: 'app-parent',
- templateUrl: './parent-and-child.component.html',
- styleUrls: ['./parent-and-child.component.sass']
- })
- export class ParentAndChildComponent implements OnInit {
- constructor() { }
- ngOnInit() {
- }
- }
父组件 Ts 文件
2.1.2 父组件直接调用子组件的方法
通过模板内部定义子组件变量, 在父组件上可以直接调用子组件的方法, 如下:
子组件模板文件
- import { Component, OnInit, Input } from '@angular/core';
- @Component({
- selector: 'app-child',
- templateUrl: './child.component.html',
- styleUrls: ['./child.component.sass']
- })
- export class ChildComponent implements OnInit {
- constructor() { }
- ngOnInit() {
- }
- childPrint() {
- alert("来自子组件的打印");
- }
- }
子组件 Ts 文件
- <p>
- parent-and-child works!
- </p>
- <app-child #child></app-child>
- <button (click)="child.childPrint()"></button>
父组件模板文件
- import { Component, OnInit } from '@angular/core';
- @Component({
- selector: 'app-parent',
- templateUrl: './parent-and-child.component.html',
- styleUrls: ['./parent-and-child.component.sass']
- })
- export class ParentAndChildComponent implements OnInit {
- constructor() { }
- ngOnInit() {
- }
- }
父组件 Ts 文件
2.1.3 父组件接受子组件派发的事件
通过 @Output 在子组件绑定一个事件发射器, 在父组件通过事件绑定监听该事件
这样在子组件派发一个事件, 父组件就能够收到
子组件模板文件
- import { Component, OnInit, Output, EventEmitter } from '@angular/core';
- @Component({
- selector: 'app-child',
- templateUrl: './child.component.html',
- styleUrls: ['./child.component.sass']
- })
- export class ChildComponent implements OnInit {
- @Output()
- initEmit = new EventEmitter<string>();
- constructor() { }
- ngOnInit() {
- this.initEmit.emit("子组件初始化成功");
- }
- }
子组件 TS 文件
- <p>
- parent-and-child works!
- </p>
- <app-child (initEmit)="accept($event)"></app-child>
父组件模板文件
- import { Component, OnInit, Output, EventEmitter } from '@angular/core';
- @Component({
- selector: 'app-parent',
- templateUrl: './parent-and-child.component.html',
- styleUrls: ['./parent-and-child.component.sass']
- })
- export class ParentAndChildComponent implements OnInit {
- constructor() { }
- ngOnInit() {
- }
- accept(msg:string) {
- alert(msg);
- }
- }
父组件 TS 文件
2.2 没有直接关系的组件
2.2.1service
做一个全局单例的 service, 然后多个组件共享这个实例, 当然就可以共享其中的成员, 来进行通讯
- import { Component, Injectable, EventEmitter } from '@angular/core';
- @Injectable()
- export class myService {
- public info:string = '';
- constructor() {}
- }
- <p>child1 work</p>
- <button (click)="showInfo()"></button>
- import { Component, OnInit} from '@angular/core';
- import { myService } from '../../../service/myService..service';
- @Component({
- selector: 'app-child',
- templateUrl: './child1.component.html',
- styleUrls: ['./child1.component.sass']
- })
- export class Child1Component implements OnInit {
- constructor(
- public service: myService
- ) { }
- ngOnInit() {
- }
- showInfo() {
- alert(this.service.info);
- }
- }
- <p>
- child2 works!
- </p>
- <button (click)="changeInfo()"></button>
- import { Component, OnInit} from '@angular/core';
- import { myService } from '../../service/myService..service';
- @Component({
- selector: 'app-child2',
- templateUrl: './child2.component.html',
- styleUrls: ['./child2.component.sass']
- })
- export class Child2Component implements OnInit {
- constructor(
- public service: myService
- ) { }
- ngOnInit() {
- }
- changeInfo() {
- this.service.info = this.service.info + "1234";
- }
- }
- <button [routerLink]="['/about',1]">跳转</button>
- <button [routerLink]="['/about',"home"]">跳转</button>
- id: string = '';
- ngOnInit() {
- // 获取传入的值
- this.id = this.route.snapshot.params['id'];
- }
- id: number = 0;
- status: boolean = false;
- ngOnInit() {
- this.route.queryParams
- .subscribe((params: Params) => {
- this.id = params['id'];
- this.status = params['status'];
- })
- }
- import { Component, OnInit } from '@angular/core';
- @Component({
- selector: 'app-child1',
- templateUrl: './child1.component.html',
- styleUrls: ['./child1.component.sass']
- })
- export class Child1Component implements OnInit {
- constructor() { }
- ngOnInit() {
- }
- setData(){
- window.localStorage.setItem("test", JSON.stringify({ key: 'test', value: 1 }));
- }
- }
- import { Component, OnInit } from '@angular/core';
- @Component({
- selector: 'app-child2',
- templateUrl: './child2.component.html',
- styleUrls: ['./child2.component.sass']
- })
- export class Child2Component implements OnInit {
- constructor() { }
- ngOnInit() {
- }
- getData() {
- var json = window.localStorage.getItem("test");
- var obj = JSON.parse(json);
- console.log(obj.key);
- console.log(obj.value);
- }
- }
来源: https://www.cnblogs.com/banluduxing/p/9290569.html