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> ...
随机推荐
- VS提交码云权限问题
提交代码时出现Git failed with a fatal error. Authentication failed的问题. 如果没有像当前代码库提交过代码(所有项目),那么提交时会提示输入账号密码 ...
- 当this碰到return会发生什么
当this碰到return时 function fn(params) { this.user = 'fzy' return {} } var a = new fn console.log(a.user ...
- 剑指 Offer 44. 数字序列中某一位的数字
题目描述 数字以0123456789101112131415-的格式序列化到一个字符序列中.在这个序列中,第5位(从下标0开始计数)是5,第13位是1,第19位是4,等等. 请写一个函数,求任意第n位 ...
- 用Python实现十大经典排序算法-插入、选择、快速、冒泡、归并等
本文来用图文的方式详细讲解了Python十大经典排序算法 —— 插入排序.选择排序.快速排序.冒泡排序.归并排序.希尔排序.插入排序.桶排序.基数排序.计数排序算法,想要学习的你们,继续阅读下去吧,如 ...
- Spring Boot与日志
目录 1.日志框架 2.市面上的日志框架 2.1 下表行间无任何对应关系 2.2 日志门面:slf4j 2.3 日志实现:logback 2.4 Spring Boot怎么做的呢? 3.slf4j的使 ...
- 超详细!盘点Python中字符串的常用操作
在Python中字符串的表达方式有四种 一对单引号 一对双引号 一对三个单引号 一对三个双引号 a = 'abc' b= "abc" c = '''abc''' d = " ...
- C/C++ 实现PE文件特征码识别
PE文件就是我们常说的EXE可执行文件,针对文件特征的识别可以清晰的知道该程序是使用何种编程语言实现的,前提是要有特征库,PE特征识别有多种形式,第一种是静态识别,此方法就是只针对磁盘中文件的特征码字 ...
- mongodb3.4.5用http访问28017端口
4.要想用28017去访问,百度说必须开启http服务 4.1.前提: windows下安装mongodb必须装在没有中文和空格的目录下,我直接装在了D盘根目录 删掉MongoDB\Server\3. ...
- pxe+kickstart无人值守批量安装linux
一.原理和概念: 1.PXE: PXE 并不是一种安装方式,而是一种引导的方式.进行 PXE 安装的必要条件是要安装的计算机中包含一个 PXE 支持的网卡(NIC),即网卡中必须要有 ...
- 关于微信小程序官网的使用
我们在看微信支付相关的东西的时候,会发现有些想找的地址不好找,,没看到入口,接下来我就是整理了一下 链接: https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa ...