角4兄弟通信

Question

与服务的同级组件通信(模拟redux fn)

• 在仪表板中添加任务日期和数量
• 更新仪表板cmp中的任务日期和数量
• 从仪表板cmp空出英雄- todos cmp中的所有按钮

这是可行的，优雅而简单的使用角度吗？

//our root app component
    import {Component, NgModule, Input, Output, EventEmitter, VERSION} from '@angular/core'
    import {BrowserModule} from '@angular/platform-browser'
    @Component({
      selector: 'my-app',
      template: `
    <div>
      <h2>{{name}}</h2>
      <app-heroes-todos></app-heroes-todos>
      <app-heroes-dashboard></app-heroes-dashboard>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `We Honor Angular! v${VERSION.full}`;
  }
}

interface Todos {
  title: string;
  isCompleted: boolean;
  date: number;
}

@Component({
  selector: 'app-heroes-todos',
  styles: [`
    .completed {
      text-decoration: line-through;
    }
  `],
  template: `
  <h2>Mission List</h2>
<input #input>
<button (click)="add(input)">Add</button>
<ul>
  <li *ngFor="let todo of todos">
    <span [class.completed]="todo.isCompleted" (click)="toggle(todo)" >{{todo.title}}</span>
    <button (click)="remove(todo)">X</button>
  </li>
</ul>`
})
export class HeroesTodos {

todos: Todos[] = [];
  totalItems = 0;
  lastUpdate: any;

  add(input) {
    this.todos.push({title: input.value, isCompleted: false, date: new Date().getTime()});
    this.lastUpdate = new Date().getTime();
    this.totalItems++;
    input.value = '';
  }

  remove(todo) {
    let index = this.todos.indexOf(todo);
    this.lastUpdate = new Date().getTime();
    this.totalItems--;
    this.todos.splice(index, 1);
  }
  toggle(todo) {
    todo.isCompleted = !todo.isCompleted;
  }

  deleteAll(clearData: boolean) {
    if (clearData) {
    this.todos = [];
    this.totalItems = 0;
    this.lastUpdate = new Date().getTime();
  }
  }
}
@Component({
  selector: 'app-heroes-dashboard',
  template: `
  <div>
        <h2>Dashboard</h2>
        <p><b>Last Update:</b>{{ lastUpdate | date:'medium' }}</p>
        <p><b>Total Missions:</b> {{ totalItems }}</p>
        <button (click)="deleteAll()">Delete All</button>
</div>
  `
})
export class HeroesDashboard {
  @Input() totalItems;
  @Input() lastUpdate;
  @Output() onDeleted = new EventEmitter<boolean>();

  constructor() { }

  deleteAll() {
    this.onDeleted.emit(true);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, HeroesTodos, HeroesDashboard ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 1

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class SharedService {
  //observable string source
  private totalCount = new Subject<number>();
  private lastUpdate = new Subject<number>();
  private clearAll = new Subject<boolean>();

  // observable string streams
  totalCount$ = this.totalCount.asObservable();
  lastUpdate$ = this.lastUpdate.asObservable();
  clearAll$ = this.clearAll.asObservable();

  // service message commands
  publishTotalCount(count: number) {
    this.totalCount.next(count);
  }

  publishLastUpdate(date: number) {
    this.lastUpdate.next(date);
  }

  publishClearAll(clear: boolean) {
    this.clearAll.next(clear);
  }

}

https://plnkr.co/edit/UEPbIj4OmfWrMuU9jpzN?p=preview