Angular10 组件之间的通讯

1 父组件和子组件之间的通讯

2 利用中间组件实现两个组件之间的通讯

3 利用服务实现两个组件之间的通讯

2017年8月26日20:09:13

　　待更新...

1 组件之间的关系图

　　1.1 父子关系

　　1.2 兄弟关系

　　1.3 没啥关系

2 组件之间有以下几种典型的通讯方案

　　2.1 直接父子关系

　　　　2.1.1 父组件直接访问子组件的 public 属性和方法

　　　　　　技巧01：父组件的视图中调用子组件的方法需要利用模板变量

　　　　　　技巧02：父组件的类中调用子组件的方法需利用@ViewChild装饰器

　　　　2.1.2 借助于 @Input 和 @Output 进行通讯

　　　　　　就是利用输入属性和输出属性来实现

　　　　　　技巧01：输入属性和输出属性需要用到属性绑定和事件绑定相关的知识

　　2.2 兄弟关系

　　　　利用他们共同的父组件进行通信【有点麻烦】

　　　　技巧01：此时他们的父组件相当于一个中间人

　　2.3 适用于任何关系的方法

　　　　2.3.1 借助于service单例进行通讯

　　　　2.3.2 利用cookie或者localstorage进行通讯

　　　　2.3.3 利用session进行通讯

3 直接调用

　　对于父子组件而言，父组件可以直接调用子组件的public型属性和方法

　　缺点：如果父组件直接访问子组件，那么两个组件之间的关系就被固定死了。父子两个组件紧密依赖，谁也离不开谁，也就都不能单独使用了。所以，除非你知道自己在做什么，最好不要直接在父组件里面直接访问子组件上的属性和方法，以免未来一改一大片。

　　3.1 利用模板变量实现

　　3.2 利用@ViewChild实现

　　3.3 代码汇总

　　　　》父组件

<div class="panel panel-primary">

  <div class="panel-heading">父组件</div>

  <div class="panel-body">

    <child #child1 ></child>

    <p>

      <label>获取子组件的info属性值为：</label>

      <span>{{child1.info}}</span>

    </p>

    <p>

      <button (click)="child1.greeting('王杨帅');">调用子组件的greeting方法</button>

    </p>

  </div>

  <div class="panel-footer">{{currentDate | date : "yyyy-MM-dd HH:mm:ss"}}</div>

</div>

HTML

import { Component, OnInit, ViewChild } from '@angular/core';

import { ChildComponent } from './child/child.component';

import { AfterViewInit, AfterContentChecked, AfterContentInit, AfterViewChecked } from '@angular/core/src/metadata/lifecycle_hooks';

@Component({

  selector: 'parent',

  templateUrl: './parent.component.html',

  styleUrls: ['./parent.component.scss']

})

export class ParentComponent implements OnInit {

  @ViewChild("child1")

  child1 :  ChildComponent;

  currentDate : Date;

  constructor() { }

  ngOnInit() {

    this.currentDate = new Date();

    // setInterval(() => {

    //   this.currentDate = new Date();

    // }, 1000);

    this.child1.greeting("三少");

  }

}

　　　　》子组件

<div class="panel panel-primary">

  <div class="panel-heading">子组件</div>

  <div class="panel-body">

  </div>

  <div class="panel-footer">{{currentDate | date : "yyyy-MM-dd HH:mm:ss"}}</div>

</div>

HTML

import { Component, OnInit, DoCheck,AfterViewChecked, EventEmitter, AfterContentInit, Output, Input, OnChanges, SimpleChanges, AfterViewInit, AfterContentChecked } from '@angular/core';

@Component({

  selector: 'child',

  templateUrl: './child.component.html',

  styleUrls: ['./child.component.scss']

})

export class ChildComponent implements OnInit {

  currentDate : Date;

  info : string;

  constructor() { }

  ngOnInit() {

    this.info = "子组件中的info属性";

    this.currentDate = new Date();

    // setInterval(() => {

    //   this.currentDate = new Date();

    // }, 1000);

  }

  greeting(name : string) : void {

    alert("子组件中greeting方法的返回值: Helo " + name);

    console.log("子组件中greeting方法的返回值: Helo " + name);

  }

}

4 @Input 和 @Output

　　就是通过属性绑定来实现父组件向子组件的输入属性船值；通过事件绑定来实现子组件向父组件传值

　　技巧01：其实可以直接利用双向绑定来实现

　　4.1 父组件向子组件传值

　　　　子组件利用@Input定义一个输入属性，父组件视图中在子组件的标签上利用属性绑定来实现

　　4.2 子组件向父组件传值

　　　　子组件利用@Output定义一个输出属性，父组件视图中在子组件标签上利用事件来实现

　　4.3 代码汇总

　　　　》父组件

<div class="panel panel-primary">

  <div class="panel-heading">父组件</div>

  <div class="panel-body">

    <!-- 这三种写法都可以实现 -->

    <!-- <child [info]="parentInfo" (infoChange)="onInfoChange($event)" ></child> -->

    <!-- <child [info]="parentInfo" (infoChange)="parentInfo=$event" ></child>   -->

    <child [(info)]="parentInfo" ></child>  

    <p>

      {{parentInfo}}

    </p>

  </div>

  <div class="panel-footer">{{currentDate | date : "yyyy-MM-dd HH:mm:ss"}}</div>

</div>

HTML

import { Component, OnInit, ViewChild } from '@angular/core';

import { ChildComponent } from './child/child.component';

import { AfterViewInit, AfterContentChecked, AfterContentInit, AfterViewChecked } from '@angular/core/src/metadata/lifecycle_hooks';

@Component({

  selector: 'parent',

  templateUrl: './parent.component.html',

  styleUrls: ['./parent.component.scss']

})

export class ParentComponent implements OnInit {

  parentInfo : string;

  currentDate : Date;

  constructor() { }

  ngOnInit() {

    this.parentInfo = "王杨帅";

    this.currentDate = new Date();

    // setInterval(() => {

    //   this.currentDate = new Date();

    // }, 1000);

  }

  onInfoChange(info : string) {

    this.parentInfo = info;

  }

}

　　　　》子组件

<div class="panel panel-primary">

  <div class="panel-heading">子组件</div>

  <div class="panel-body">

    <p>

      输入属性info的值为：{{info}}

    </p>

    <p>

      <button (click)="onTest()" >点击向父组件发送数据</button>

    </p>

  </div>

  <div class="panel-footer">{{currentDate | date : "yyyy-MM-dd HH:mm:ss"}}</div>

</div>

HTML

import { Component, OnInit, DoCheck,AfterViewChecked, EventEmitter, AfterContentInit, Output, Input, OnChanges, SimpleChanges, AfterViewInit, AfterContentChecked } from '@angular/core';

@Component({

  selector: 'child',

  templateUrl: './child.component.html',

  styleUrls: ['./child.component.scss']

})

export class ChildComponent implements OnInit {

  currentDate : Date;

  @Input()

  info : string;

  @Output()

  infoChange : EventEmitter<string> = new EventEmitter();

  constructor() { }

  ngOnInit() {

    this.currentDate = new Date();

    // setInterval(() => {

    //   this.currentDate = new Date();

    // }, 1000);

  }

  onTest() : void {

    this.infoChange.emit("子组件传过来的数据");

  }

}

5 服务实现

　　待更新...

6 cookie或localstorage实现

　　6.1 原理图

　　6.2 代码汇总

　　　　》工具组件

　　　　　　利用投影来简化代码

<div class="panel panel-primary">

  <div class="panel-heading">

    <ng-content select=".heading"></ng-content>

  </div>

  <div class="panel-body">

    <ng-content select=".body"></ng-content>

  </div>

  <div class="panel-footer">

    {{currentDate | date : "yyyy-MM-dd HH:mm:ss"}}

  </div>

</div>

HTML

import { Component, OnInit } from '@angular/core';

import { setInterval } from 'timers';

@Component({

  selector: 'panel',

  templateUrl: './panel.component.html',

  styleUrls: ['./panel.component.scss']

})

export class PanelComponent implements OnInit {

  currentDate : Date;

  constructor() { }

  ngOnInit() {

    this.currentDate = new Date();

    setInterval(() => {

      this.currentDate = new Date();

    }, 1000);

  }

}

　　　　》测试组件01

<panel>

  <div class="heading">

    测试组件01

  </div>

  <div class="body">

    <button (click)="onClick()">写入数据到</button>

  </div>

</panel>

HTML

import { Component, OnInit } from '@angular/core';

import { TestService } from '../services/test.service';

@Component({

  selector: 'test01',

  templateUrl: './test01.component.html',

  styleUrls: ['./test01.component.scss']

})

export class Test01Component implements OnInit {

  constructor(

  ) { }

  ngOnInit() {

  }

  onClick() : void {

    // 将对象转化成JSON字符串并存储道浏览器缓存中

    window.localStorage.setItem("user", JSON.stringify({name: "王杨帅", age: 9}));

  }

}

　　　　》测试组件02

<panel>

  <div class="heading">

    测试组件02

  </div>

  <div class="body">

    <p>

      <button (click)="onClick()">获取数据</button>

    </p>

  </div>

</panel>

HTML

import { Component, OnInit } from '@angular/core';

import { TestService } from '../services/test.service';

@Component({

  selector: 'test02',

  templateUrl: './test02.component.html',

  styleUrls: ['./test02.component.scss']

})

export class Test02Component implements OnInit {

  constructor(

  ) { }

  ngOnInit() {

  }

  onClick() : void {

    // 从浏览器缓存中获取数据【PS: 获取到的是string类型的数据】

    let data = localStorage.getItem("user");

    console.log(data);

    // 将JSON字符串转化成对象

    let json_data = JSON.parse(data);

    console.log(json_data.name);

    window.localStorage.removeItem("user");

  }

}

7 session实现

　　待更新...