[Angular 2] Passing Template Input Values to Reducers
Angular to input Template VALUES
2023-09-14 08:59:20 时间
Angular 2 allows you to pass values from inputs simply by referencing them in the template and passing them into your Subject.next() call. This lesson shows you how to make a number input and pass the value so you can configure how much you want the clock to change.
/** * Created by wanzhen on 26.4.2016. */ import {Component} from 'angular2/core'; import {Observable} from 'rxjs/Observable'; import 'rxjs/add/observable/interval'; import 'rxjs/add/operator/map'; import 'rxjs/add/observable/merge'; import 'rxjs/add/operator/startWith'; import 'rxjs/add/operator/scan'; import 'rxjs/add/operator/mapTo'; import {Subject} from "rxjs/Subject"; import {Store} from '@ngrx/store'; import {SECOND, HOUR} from './reducer'; @Component({ selector: 'app', template: ` <input #inputNum type="number" value="0"> <button (click)="click$.next(inputNum.value)">Update</button> <h1>{{clock | async | date:'yMMMMEEEEdjms'}}</h1> ` }) export class App { click$ = new Subject() .map( (number) => ({type: HOUR, payload: parseInt(number)})); seconds$ = Observable.interval(1000) .mapTo({type: SECOND, payload: 1}); clock; constructor(store:Store) { this.clock = store.select('clock'); Observable.merge( this.click$, this.seconds$ ) .subscribe((action)=>{ store.dispatch(action) }) } }
相关文章
- [Angular] Use :host-context and the ::ng-deep selector to apply context-based styling
- [Angular] Subscribing to router events
- [Angular] Subscribing to the valueChanges Observable
- [Angular 2] Using Pipes to Filter Data
- [Angular 2] Controlling how Styles are Shared with View Encapsulation
- [AngularJS] Using angular.bootstrap to Initialize Your App
- [Angular] Configure Anuglar CLI to generate inlineTemplate and inlineStyle
- [Angular] Upgrading to RxJS v6
- [Unit Testing] Configure the Angular CLI to use the Karma Mocha test reporter
- [Angular Directive] 3. Handle Events with Angular 2 Directives
- [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2
- [Angular2 Router] Exiting an Angular 2 Route - How To Prevent Memory Leaks
- Angular页面发生更新时,更新如何从view层传递到model层
- 在Angular单个的单元测试里,调用多次detectChange,会重复执行ngAfterViewInit hook吗
- Angular 项目中 angular.json builder 字段的可选项介绍
- 为什么在大型 Angular 应用里我们需要使用 ngrx
- 利用 Angular Directive 和 @HostBinding 实现输入文本框随着键盘输入自动变色效果
- Angular应用动态创建style标签页的场景
- Angular开发遇到的一个错误消息 - Expected linebreak to be LF(和本地文件的换行设置有关)
- You currently don‘t have access to this membership resource. To resolve this issue, agree to the lat