Question

我在此处发布的问题略有不同：Angular2 component view does not update on value change via method。

我想从modal component切换toggle buttons component上的变量，但视图未更新。

单击切换按钮后，如何更新模态视图？

参见参考：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)
  }
}

Answer 1

您需要引用模态并将其作为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() {

  }
}

此输入必须在Toggle组件中定义如下：

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

  (...)
}

请参阅此plunkr：https://plnkr.co/edit/3t5xo9Y6N8iEL4eqw9Gn?p=preview。

Answer 2

Modal实例注入

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

  }

是由Angular DI创建的一些任意实例，根本不与<modal></modal>元素相关，因此调用或更改属性对App的视图没有任何影响

两个Angular 2组件之间的连接视图未更新

2 个答案: