Question

在Angular2中，我正在创建一个需要打开和关闭的模态窗口。在开发过程中，我偶然发现了一些奇怪的东西：

当我使用外部按钮更改activate内的Modal class变量时。视图未更新。

在控制台中打印activate变量没有任何问题。我看到变量在true和false之间切换。

看起来我缺少强制视图使用新值进行渲染的代码。

有没有人知道我在这里可能缺少什么？

中的以下代码

app.ts

import {Component} from 'angular2/core';
import {Modal} from './modal';

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

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

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

      <modal></modal>

    </div>
  `,
  directives: [Modal]
})
export class App {
  constructor(private modal: Modal) {

  }

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

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

modal.ts

import {Component, Injectable} from 'angular2/core'

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

@Injectable()
export class Modal {

  activate: true;

  constructor() {
    this.activate = false;
  }

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

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

}

Answer 1

仅仅因为你注入一个模态并得到一个模态，并不意味着它是你想要的模态实例。如果您在providers中列出它，Angular DI只会创建一个实例并将其传入，但此实例与<modal>标记完全无关

使用@ViewChild()来获取参考

Plunker

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

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

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

      <modal #modal></modal>

    </div>
  `,
  directives: [Modal]
})
export class App {
  @ViewChild('modal') modal;
  constructor() {

  }

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

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

对于您的示例代码，无论如何都没有必要直接引用。您可以使用@Input()和@Output()绑定。如果组件和模态不是那么密切相关（如果您使用整个应用程序可以使用的全局模式实例，那么通过Observable通知有关值更改的共享服务可能是更好的方法。

Answer 2

<强> working plunker

我已将提供商更改为指令，例如，

directives: [Modal]

我正在使用@ViewChild访问 ModalCmp 。

<强> app.ts

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

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

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

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

      <modal></modal>

    </div>
  `
})
export class App {
  @ViewChild(Modal) vc:Modal;
  constructor() {

  }

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

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

<强> Modal.ts

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

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

//@Injectable()
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)
  }

}

Angular2组件视图不会通过方法

2 个答案: