CounterStuffByWangJing

angular.json

@@ -94,5 +94,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/app/app.module.ts

@@ -3,10 +3,14 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { CounterComponent } from './counter/counter.component';
+import { CounterGroupComponent } from './counter-group/counter-group.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    CounterComponent,
+    CounterGroupComponent
   ],
   imports: [
     BrowserModule,

src/app/counter-group/counter-group.component.html

@@ -0,0 +1,11 @@
+<button (click)="onAdd()">Add counter</button>
+
+<div *ngFor="let counter of counters; index as i;">
+    <app-counter [number]="counter.num" (change)="counter.num = $event"> </app-counter>
+    <button (click)="onDelete(i)">Delete</button>
+</div>
+
+<div>
+    Sum: {{sum}}
+    <button (click)="onResetAll()">Reset All</button>
+</div>

src/app/counter-group/counter-group.component.spec.ts

@@ -0,0 +1,44 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CounterGroupComponent } from './counter-group.component';
+import { CounterComponent} from '../counter/counter.component';
+/*import的時候把路徑向上走一層，加兩個點 */
+
+describe('CounterGroupComponent', () => {
+  let component: CounterGroupComponent;
+  let fixture: ComponentFixture<CounterGroupComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CounterGroupComponent, CounterComponent]
+    });
+    fixture = TestBed.createComponent(CounterGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should add a counter when call onAdd', ()=>{
+    component.counters = [{num:1}]
+    component.onAdd()
+    expect(component.counters).toEqual([{num:1},{num:0}])
+  })
+
+  it('should remove a counter when call onDelete', ()=>{
+    component.counters = [{num:1},{num:0}]
+    component.onDelete(0)
+    expect(component.counters).toEqual([{num:0}])
+  })
+
+  it('should reset all counters and reset sum when call onResetAll', ()=>{
+    component.counters = [{num:7},{num:7}]
+    component.onResetAll()
+    component.counters.forEach(element => 
+      expect(element.num).toEqual(0))
+    expect(component.sum).toEqual(0)
+  })
+
+});

src/app/counter-group/counter-group.component.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { reduce } from 'rxjs';
+
+@Component({
+  selector: 'app-counter-group',
+  templateUrl: './counter-group.component.html',
+  styleUrls: ['./counter-group.component.css']
+})
+export class CounterGroupComponent {
+  counters: {num: number}[] = [
+    {num: 1},
+    {num: 2},
+    {num: 3}
+  ]
+
+  get sum(){
+    return this.counters.reduce(
+      (result, current) => result + current.num,
+      0)   /*这里0是reduce的初始值*/
+      /* result是用于迭代计数的变量*/
+  }
+
+  onAdd(){
+    this.counters.push({num: 0})
+  }
+
+  onResetAll(){
+    this.counters.forEach(element => {
+      element.num = 0
+    })
+  }
+
+  onDelete(index:number){
+    this.counters.splice(index, 1);
+  }
+
+
+}

src/app/counter/counter.component.css

@@ -0,0 +1,3 @@
+.button{
+
+}

src/app/counter/counter.component.html

@@ -0,0 +1,6 @@
+<div>
+<button (click)="onIncrease()">+</button>
+<span>number: {{number}}</span>
+<button (click)="onDecrease()">-</button>
+<button (click)="onResetOneCounter()">Reset</button>
+</div>

src/app/counter/counter.component.spec.ts

@@ -0,0 +1,39 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CounterComponent } from './counter.component';
+
+describe('CounterComponent', () => {
+  let component: CounterComponent;
+  let fixture: ComponentFixture<CounterComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CounterComponent]
+    });
+    fixture = TestBed.createComponent(CounterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should increase number when call OnIncrease', ()=>{
+    component.number = 2
+    component.onIncrease()
+    expect(component.number).toEqual(3)
+  })
+
+  it('should decrease number when call OnDecrease', ()=>{
+    component.number = 2
+    component.onDecrease()
+    expect(component.number).toEqual(1)
+  })
+
+  it('should reset number when call OnResetOneCounter', ()=>{
+    component.number = 2
+    component.onResetOneCounter()
+    expect(component.number).toEqual(0)
+  })
+});

src/app/counter/counter.component.ts

@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-counter',
+  templateUrl: './counter.component.html',
+  styleUrls: ['./counter.component.css']
+})
+export class CounterComponent {
+  @Input() number = 0     /* @Input 标记number是可以被外界设置的 */
+  @Output() change = new EventEmitter()   /* @Output 标记change是向外发射的事件 */
+  /* 在html里，(change)="counter.num = $event",其中$event的值就是change发出来的 */
+
+  onIncrease(){
+    this.number ++
+    this.change.emit(this.number)
+  }
+  onDecrease(){
+    this.number --
+    this.change.emit(this.number)
+  }
+  onResetOneCounter(){
+    this.number = 0
+    this.change.emit(this.number)
+  }
+}