文档章节

angular6 组件间的交流方式 (2)-- viewChild 和 data service

IrisHuang
 IrisHuang
发布于 2018/07/30 10:45
字数 885
阅读 158
收藏 0

我在上上篇文章中介绍了父子组件间通过 Input 和 Output 的交流方式。现在我会介绍组件间交流的其他两种方法,viewChild 和 data service。我将这篇文章分为两部分。首先看 viewChild 部分吧。

通过 viewChild 传递数据

什么是 viewChild?

viewChild 就是准许一个组件被注入到别的组件中。并且指明了该可用子组件有了通往父组件的通道。简单说来,就是如果我们想要子组件的特性,我们就可以使用 viewChild 这个神器。为了讲得详细点,以下面的代码为例。先创建两个组件,一个为父组件,另一个为子组件。 下面是 child.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
 counter :number = 0;
 IncreaseNumber():void{
  this.counter++;
}
  constructor() { }
  ngOnInit() {
  }
}

从这个代码块中,我们可以知道,该组件有一个 counter 属性和一个 IncreaseNumber 方法。每次调用 IncreaseNumber 方法,counter的值就会自增一次。现在我们看看父组件。 parent.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import{ChildComponent} from './child.component'
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  @ViewChild(ChildComponent) private childcomponent : ChildComponent;
Increase():void{
  this.childcomponent.IncreaseNumber();
}
Dicrease():void{
  this.childcomponent.counter--;
}
constructor() { }
  ngOnInit() {
  }
}

现在一步步分析上面的代码块。

  • import {ViewChild} from '@angular/core',再 import进子组件。

@ViewChild(ChildComponent) private childcomponent : ChildComponent;

这句代码非常重要,用于查询子组件,并在本地创建的子组件对象 childcomponent 中注入相同的属性。父组件同样有两个方法,自增和自减。父组件的模板可以改成这样子:

<p>
   <b>@ViewChild with Components..</b>
<br>
<br>
<input type="button" (click)="Increase()">
<input type="button" (click)="Decrease()">
<app-child></app-child>
</p>

可以看到,我们在父组件模板中实例化了子组件。

通过 data service 传递数据

到目前为止,我们已经知道了如何在相关组件间传递数据,那么如果是不想关的组件呢?我们通常会用 service 来实现数据传递。共享数据背后的思想是共享服务,他将所有被组件中用到的数据同步在一起。就像下面这个例子: 首先来个data service:Data.service.ts

import { Injectable } from '@angular/core';
import {BehaviorSubject} from 'rxjs'
@Injectable()
export class DataService {
    private messageSource = new BehaviorSubject < string > ("Start");
    constructor() {}
    changemessage(message: string): void {
        this.messageSource.next(message);
    }
}

现在我们来分析一下上面这个代码块:

  • import { Injectable } from '@angular/core' 引进 @Injectable 装饰器,这可以让其他组件和模块使用该服务类的功能。
  • import {BehaviorSubject} from 'rxjs' 这可以返回一种Observable类型,从而订阅不同类型的消息。这个 service 里面定义了一种changemessage(),它会返回从 Observable 那里获取到的数据。为了让各组件可以使用到这个服务,我们需要在根模块中将这个 service 以 provider:[DataService]的形式引入。 引入该服务的组件 service.component.ts
import { Component, OnInit } from '@angular/core';
import{DataService} from '../data.service';
@Component({
  selector: 'app-secondcomponent',
  templateUrl: './secondcomponent.component.html',
  styleUrls: ['./secondcomponent.component.css']
})
export class SecondcomponentComponent implements OnInit {
    childmessage: string = "";
    counter:number = 0;
    constructor(private data: DataService) {}
    ngOnInit() {
        this.data.currentmessage.subscribe(Message => this.childMessage);
    }
    newmessage(): void {
        this.data.changemessage("changing counter from sibling " + this.counter++);
    }
}

总结:

  1. 通过 @Injectable 装饰器添加 service;
  2. 使用 RxJs 中的 BehaviorSubject,返回数据为 Observable 类型;
  3. 订阅一些可变属性,在组件中给它重新赋值。

参考:https://dzone.com/articles/angular-component-communication-day-2

© 著作权归作者所有

IrisHuang
粉丝 3
博文 68
码字总数 39102
作品 0
武汉
前端工程师
私信 提问
Angular6.x学习笔记——组件详解之组件通讯

目录 1 前言 2 Angular组件间的通讯 2.1 父子组件间的通讯 2.1.1 父组件设置子组件属性 2.1.2 父组件调用子组件事件 2.1.3 子组件向父组件发射事件 2.2 非父子组件通讯 2.2.1 Service 2.2.2 ...

半路独行
2018/07/24
0
0
基于 Angular6 的数据变化监听服务 - ngx-watcher

ngx-watcher 基于angular6实现数据变化监听的service 安装 npm install ngx-watcher --save 配置 对于angular6项目不需要配置, Ok! 对于angular4,angular5 配置文件 @NgModule({ ... provid...

不愿透露姓名的Mr成
2018/08/13
843
0
如何在Angular中使用better-scroll插件

由于需要在一个固定的的高度做无限滚动,本来css的overflow-y也可以完成的,奈何安卓不是很流畅,还很生硬,就是用了第三方库better-scroll,配合angular的ng-content。angular的ng-content和...

前端攻城老湿
2018/12/11
0
0
教你如何在Angular中使用better-scroll插件

本文主要介绍了Angular中使用better-scroll插件的方法,小编觉得挺不错的,现在分享给大家。 better-scroll的使用由于需要在一个固定的的高度做无限滚动,本来css的overflow-y也可以完成的,...

前端攻城老湿
2018/11/27
93
0
Mr成/ngx-watcher

ngx-watcher 基于angular6实现数据变化监听的service 安装 npm install ngx-watcher --save 配置 对于angular6项目不需要配置, Ok! 对于angular4,angular5 配置文件 @NgModule({...provider...

Mr成
2018/08/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
昨天
59
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
昨天
28
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
昨天
65
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
昨天
58
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
昨天
60
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部