Angular10 组件之间的通讯

于 2017-08-26 20:10:00 发布
阅读量377 收藏 2
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/NeverCtrl-C/p/7436259.html
版权

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("三少");
  }

}
TS

　　　　》子组件

<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);
  }

}
TS

 

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;
  }

}
TS

　　　　》子组件

<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("子组件传过来的数据");
  }


}
TS

 

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);
  }

}
TS

　　　　》测试组件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}));
  }

}
TS

　　　　》测试组件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");
  }

}
TS

 

7 session实现

　　待更新...

转载于:https://www.cnblogs.com/NeverCtrl-C/p/7436259.html

weixin_30861797
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值