ng2 父子组件传值 - 状态管理
一. 父子组件之间进行直接通话
//父组件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 父子组件传值 - 状态管理的更多相关文章
- 使用react进行父子组件传值
在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...
- Vue中非父子组件传值的问题
父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...
- 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
1.创建组件的方法 函数组件 class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...
- React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...
- Angular 父子组件传值
Angular 父子组件传值 @Input @Output @ViewChild 新建一个头部组件 newsheader 在主组件引用 news 组件,在news组件添加 newsheader 组 ...
- vue 非父子组件传值
/*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...
- 【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
- vue父子组件传值加例子
例子:http://element-cn.eleme.io/#/zh-CN/component/form 上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...
- Vue非父子组件传值
<template> <div id="app"> <v-home></v-home> <br> <hr> ...
随机推荐
- 基于PHP实现CMS识别
最近正在开发一款基于PHP实现的Web安全检测平台,写到了CMS识别这一功能,便写一篇文章总结一下. 首先需要梳理的是CMS识别的几种方法: 1.网页源代码特征:例如源代码中包含CMS的名称或是某种特 ...
- 反射机制(Java)
反射机制 今天闲来无事,对反射机制http://www.cnblogs.com/jqyp/archive/2012/03/29/2423112.html阅读一番,整理了下这方面的知识以及自己的一些心得 ...
- 微服务架构组件梳理之Netflix停更之后该何去何从
自2018年底,Netflix陆续宣布Eureka.Hystrix等框架进入维护状态,不再进行新功能的开发. 恰逢最近我打算对公司的办公项目进行微服务架构升级,所以恶补了一番微服务相关知识,在这里进行 ...
- 聊聊redis单线程为什么能做到高性能和io多路复用到底是个什么鬼
1:io多路复用epoll io多路复用简单来说就是一个线程处理多个网络请求 我们知道epoll in 的事件触发是可读了,这个比较好理解,比如一个连接过来,或者一个数据发送过来了,那么in事件就触 ...
- 外包公司派遣到网易,上班地点网易大厦,转正后工资8k-10k,13薪,包三餐,值得去吗?
作为一个人,我们必须时时刻刻清醒地看待自己,做到不卑不亢才能坚强地活下去. 请肆无忌惮地点赞吧,微信搜索[沉默王二]关注这个在九朝古都洛阳苟且偷生的程序员.本文 GitHub github.com/i ...
- W5300中文手册
如果链接没了就Q我吧1178875532 链接:https://pan.baidu.com/s/1HcNJN_T6QJCvPWymU1sFDQ 提取码:suBB
- oracle之二检查点
检查点(checkpoint) 8.1 什么是checkpointcheckpoint是数据库的一个内部事件,检查点激活时会触发数据库写进程(DBWR),将数据缓冲区里的脏数据块写到数据文件中. 8. ...
- Linux下find与exec的联手干大事
在Linux下工作,find命令绝对是一个非常高频的命令.我们可以用find命令来找到符合某些关键词的文件,找到某些日期的文件,也可以设定一些正则表达式,找到一系列满足该条件的文件. 但是,如果只有一 ...
- adb命令—monkey篇
monkey 目录 monkey 1.Monkey介绍 2.Monkey是用来做什么的 3.Monkey程序介绍 下面就是一些Monkey命令了 1.Monkey介绍 顾名思义,Monkey就是猴子, ...
- docker部署Broketrmq集群
部署Broketrmq集群 通过docker-compose形式部署 首先创建 broker 配置文件,配置文件如下: brokerClusterName = DefaultCluster #集群名 ...