子コンポーネントからangular2のテンプレートにデータを渡す

Question

ホームとカウンターの2つのコンポーネントがあり、ホームからカウンターのテンプレート変数をインクリメントできるようにしたい。初期化以外は動作しません。変数は17に初期化されますが、その後はインクリメントが機能しません。

CounterComponent

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'counter', 
    styleUrls: ['app/counter.component/style.css'], 
    templateUrl: 'app/counter.component/counter.component.html' 
}) 
export class CounterComponent { 

    public counter: number = 17; 

    activate() { 
    this.counter++; 
    } 

    deactivate() { 
    this.counter--; 
    } 
} 

counter.component.html

The counter is: {{counter}} 

HomeComponent

import { Component } from '@angular/core'; 
import { CounterComponent } from './counter.component/counter.component'; 

@Component({ 
    selector: 'home', 
    directives: [CounterComponent], 
    providers: [CounterComponent], 
    templateUrl: 'app/home.component.html' 
}) 
export class HomeComponent { 

    constructor(public counter: CounterComponent) {} 

    doSomething() { 
    this.counter.activate(); 
    } 

} 

home.component.html

Home component 

<button (click)="doSomething()">Activate</button> 


<counter></counter> 

Answer 1

IはViewChildデコレータを使用して、カウンタ・コンポーネントを参照することになります。このインスタンスでは、プログラムで対話できます。

@Component({ 
    (...) 
}) 
export class HomeComponent { 
    @ViewChild(CounterComponent) 
    counter:CounterComponent; 

    doSomething() { 
    this.counter.activate(); 
    } 
}