角度4兄弟コンポーネント通信

Question

兄弟コンポーネント通信（Reduxのは、fnをエミュレート） TODO作成サービスダッシュボードCMPにおける&量がで

削除任務日付& &量を更新さ&

• 追加ミッション日ダッシュボードcmpが更新されます
• ダッシュボードからすべてのボタンを削除しますcmp空の配列in英雄 - 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