typescript - Conexão entre duas visualizações de componentes Angular 2 não está atualizando

Eu tenho uma pequena variação da pergunta postada aqui: a visualização do componente Angular2 não atualiza quando o valor é alterado via método.

Eu quero alternar uma variável no componente modal a partir do componente de botões de alternância, mas a visualização não é atualizada.

Como posso fazer a visualização modal atualizar quando eu clicar no botão de alternância?

Veja para referência: plunkr

app.ts

//our root app component
import {Component, ViewChild} from 'angular2/core';
import {Modal} from './modal';
import {ToggleButtons} from './togglebuttons';

@Component({
  selector: 'my-app',
  template: `
    <div>

       <toggle-buttons></toggle-buttons>

       <modal></modal>

    </div>
  `,
  providers: [Modal, ToggleButtons, ],
})
export class App {
  constructor() {

  }
}

togglebuttons.ts

//our root app component
import {Component} from 'angular2/core';
import {Modal} from './modal';

@Component({
  selector: 'toggle-buttons',
  template: `
    <div>

      <button (click)="toggle()">toggle</button>

      <button (click)="showActivate()">print</button>

    </div>
  `
})
export class ToggleButtons {
  constructor(private modal: Modal) {

  }

  showActivate() {
    this.modal.showActivate();
  }

  toggle() {
    this.modal.toggleActivate();
  }
}

modal.ts

//our root app component
import {Component, Injectable} from 'angular2/core'

@Component({
  selector: 'modal',
  template: `
    <div>
      <h2>Modal: {{activate}}</h2>
    </div>
  `,
  directives: []
})

export class Modal {

  activate: true;

  constructor() {
    this.activate = false;
  }

  showActivate() {
    console.log('Modal:showActivate', this.activate);
  }

  toggleActivate() {
    this.activate = !this.activate;
    console.log('Modal:toggleActivate', this.activate);

    console.log(this.activate)
  }
}

Resposta #1

Você precisa referenciar o modal e fornecê-lo como entrada para o seu componente Toggle:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <toggle-buttons [modal]="modal"></toggle-buttons>
      <modal></modal>
    </div>
  `,
  directives: [Modal, ToggleButtons],
})
export class App {
  @ViewChild(Modal)
  modal: Modal;

  constructor() {

  }
}

Esta entrada deve ser definida assim em seu componente Toggle:

@Component({
  (...)
})
export class ToggleButtons {
  @Input()
  modal:Modal;

  (...)
}

Veja este plunkr: https://plnkr.co/edit/3t5xo9Y6N8iEL4eqw9Gn?p=preview.

Resposta #2

A instância Modal injetada em

export class Toggle {
  constructor(private modal: Modal) {

  }

é alguma instância arbitrária criada pelo Angular DI e não está relacionada ao elemento <modal></modal> de forma alguma, portanto chamar ou alterar propriedades não tem nenhum efeito na visualização do App