一. 父子组件之间进行直接通话

//父组件html
<ul>
<app-li [value] = "value" (liClick) = "liClick($event)">
</ul> //子组件 app-li 的 component.ts
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
//... @Input current: string; // Input 用于变量传递
@Output appClick = new EventEmitter<string>(); // Output 用于函数传递 //子组件 app-li 的html
<li (click) = "appClick.emit(li.innerText)" #li1>{{current | async}}</li>

二.通过向服务注入来实现组件通话 - 也就是外部状态和函数

//service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class HeroService {
constructor(){}
//状态
public value1: number;
public string1: number;
//函数
setValue(value1): void {
this.value1 = value;
}
setString(string1): void {
this.string1 = string1;
}
} //component.ts
string$: string;
number$: number;
constructor(private testService: TestService) {
this.string$ = testService.string1;
this.number$ = testService.number1;
} //html
<p>{{string$}}</p>
<p>{{number$}}</p>
<input (keyup) = "testService.setValue(input1.value)" #input1/>
<input (keyup) = "testService.setString(input2.value)" #input2/>

三. ngrx 状态管理

//action.ts
import { Action } from '@ngrx/store';
export enum ActionTypes {
Increment = '[Counter Component] Increment',
Decrement = '[Counter Component] Decrement',
Reset = '[Counter Component] Reset',
} export class Increment implements Action {
readonly type = ActionTypes.Increment;
} export class Decrement implements Action {
readonly type = ActionTypes.Decrement;
} export class Reset implements Action {
readonly type = ActionTypes.Reset;
} //reducer.ts 纯函数
import { Action } from '@ngrx/store';
import { ActionTypes } from './hero.actions'; export const initialState = 0; export function counterReducer(state = initialState, action: Action) {
switch (action.type) {
case ActionTypes.Increment:
return state + 1; case ActionTypes.Decrement:
return state - 1; case ActionTypes.Reset:
return 0; default:
return state;
}
} //组件中的应用
//component.ts import { Store, select } from '@ngrx/store';
import { Observable , of , interval} from 'rxjs';
import { Increment, Decrement, Reset } from '../hero.ngrx/hero.actions'; count$: Observable<number>;
constructor(private store: Store<{ count: number }>) {
this.count$ = store.pipe(select('count'));
}
increment() {
this.store.dispatch(new Increment());
} decrement() {
this.store.dispatch(new Decrement());
} reset() {
this.store.dispatch(new Reset());
}
//组件中的html
<button (click)="increment()">Increment</button>
<div>Current Count: {{ count$ | async }}</div>
<button (click)="decrement()">Decrement</button>
<button (click)="reset()">Reset Counter</button>

ng2 父子组件传值 - 状态管理的更多相关文章

  1. 使用react进行父子组件传值

    在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...

  2. Vue中非父子组件传值的问题

    父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...

  3. 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

  4. React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

  5. Angular 父子组件传值

    Angular 父子组件传值 @Input  @Output  @ViewChild 新建一个头部组件 newsheader 在主组件引用 news 组件,在news组件添加 newsheader 组 ...

  6. vue 非父子组件传值

    /*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...

  7. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

  8. vue父子组件传值加例子

    例子:http://element-cn.eleme.io/#/zh-CN/component/form         上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...

  9. Vue非父子组件传值

    <template> <div id="app"> <v-home></v-home> <br> <hr> ...

随机推荐

  1. 基于PHP实现CMS识别

    最近正在开发一款基于PHP实现的Web安全检测平台,写到了CMS识别这一功能,便写一篇文章总结一下. 首先需要梳理的是CMS识别的几种方法: 1.网页源代码特征:例如源代码中包含CMS的名称或是某种特 ...

  2. 反射机制(Java)

    反射机制 今天闲来无事,对反射机制http://www.cnblogs.com/jqyp/archive/2012/03/29/2423112.html阅读一番,整理了下这方面的知识以及自己的一些心得 ...

  3. 微服务架构组件梳理之Netflix停更之后该何去何从

    自2018年底,Netflix陆续宣布Eureka.Hystrix等框架进入维护状态,不再进行新功能的开发. 恰逢最近我打算对公司的办公项目进行微服务架构升级,所以恶补了一番微服务相关知识,在这里进行 ...

  4. 聊聊redis单线程为什么能做到高性能和io多路复用到底是个什么鬼

    1:io多路复用epoll  io多路复用简单来说就是一个线程处理多个网络请求 我们知道epoll in 的事件触发是可读了,这个比较好理解,比如一个连接过来,或者一个数据发送过来了,那么in事件就触 ...

  5. 外包公司派遣到网易,上班地点网易大厦,转正后工资8k-10k,13薪,包三餐,值得去吗?

    作为一个人,我们必须时时刻刻清醒地看待自己,做到不卑不亢才能坚强地活下去. 请肆无忌惮地点赞吧,微信搜索[沉默王二]关注这个在九朝古都洛阳苟且偷生的程序员.本文 GitHub github.com/i ...

  6. W5300中文手册

    如果链接没了就Q我吧1178875532 链接:https://pan.baidu.com/s/1HcNJN_T6QJCvPWymU1sFDQ 提取码:suBB

  7. oracle之二检查点

    检查点(checkpoint) 8.1 什么是checkpointcheckpoint是数据库的一个内部事件,检查点激活时会触发数据库写进程(DBWR),将数据缓冲区里的脏数据块写到数据文件中. 8. ...

  8. Linux下find与exec的联手干大事

    在Linux下工作,find命令绝对是一个非常高频的命令.我们可以用find命令来找到符合某些关键词的文件,找到某些日期的文件,也可以设定一些正则表达式,找到一系列满足该条件的文件. 但是,如果只有一 ...

  9. adb命令—monkey篇

    monkey 目录 monkey 1.Monkey介绍 2.Monkey是用来做什么的 3.Monkey程序介绍 下面就是一些Monkey命令了 1.Monkey介绍 顾名思义,Monkey就是猴子, ...

  10. docker部署Broketrmq集群

    部署Broketrmq集群 通过docker-compose形式部署 首先创建 broker 配置文件,配置文件如下: brokerClusterName = DefaultCluster #集群名 ...