Angular2组件视图上不通过方法价值变动更新 [英] Angular2 component view does not update on value change via method

问题描述

在Angular2我创建，需​​要打开和关闭来进行切换模态窗口。在开发过程中我偶然发现了一些奇怪的：

当我改变我的莫代尔类中的激活变量与外部按钮。该视图没有更新。

打印在控制台中激活变量超出没有任何问题。我看到真假之间的可变的转换。

它看起来像我错过code，它强制渲染新值的看法。

有没有人有一个想法是什么我可能会丢失在这里吗？

在code以下的 Plunkr

app.ts

 进口{}组件从angular2 /核心;
进口{}模态，从'./modal';@零件（{
  选择：我的应用，
  供应商：莫代尔]
  模板：`
    ＆LT; D​​IV＆GT;      ＆LT;按钮（点击）=切换（）＆GT;拨动＆LT; /按钮＆GT;      ＆LT;按钮（点击）=showActivate（）＆GT;打印＆LT; /按钮＆GT;      ＆LT;＆模式GT;＆LT; /莫代尔＆GT;    ＆LT; / DIV＆GT;
  `
  指令：[莫代尔]
}）
出口类应用{
  构造函数（私模态：模态）{  }  showActivate（）{
    this.modal.showActivate（）;
  }  切换（）{
    this.modal.toggleActivate（）;
  }
}
 

modal.ts

 进口{组件，注射}从'angular2 /核心@零件（{
  选择：莫代尔，
  模板：`
    ＆LT; D​​IV＆GT;
      ＆所述; H2＆GT;模态：{{激活}}＆下; / H2＆GT;
    ＆LT; / DIV＆GT;
  `
  指令：[]
}）@Injectable（）
出口类模态{  激活：真实的;  构造函数（）{
    this.activate = FALSE;
  }  showActivate（）{
    的console.log（'情态：showActivate'，this.activate）;
  }  toggleActivate（）{
    的console.log（'情态：toggleActivate'，this.activate）;
    ！this.activate = this.activate;
  }}
 

解决方案

仅仅因为你注入一个模式，并得到一个模式，并不意味着它是你想要的模式实例。如果您在供应商列出它角DI只是创建一个实例，并在传递，但是，这个实例不相关的＆LT;模式＆GT; 在所有的标签

使用而不是 @ViewChild（）来得到一个参考

Plunker

@Component（{
  选择：我的应用，
  模板：`
    ＆LT; D​​IV＆GT;      ＆LT;按钮（点击）=切换（）＆GT;拨动＆LT; /按钮＆GT;      ＆LT;按钮（点击）=showActivate（）＆GT;打印＆LT; /按钮＆GT;      ＆LT;模态＃＆GT;＆LT; /莫代尔＆GT;    ＆LT; / DIV＆GT;
  `
  指令：[莫代尔]
}）
出口类应用{
  @ViewChild（'模式'）模态;
  构造函数（）{  }  showActivate（）{
    this.modal.showActivate（）;
  }  切换（）{
    this.modal.toggleActivate（）;
  }
}


有关您的例子code没有必要得到一个直接引用在所有反正。您可以使用绑定@input（）和 @Output（）。如果组件和模式都不是密切相关的（如果你使用可以通过整个应用程序被用来与观测，通知有关价值共享服务的全局模式实例变化可能是一个更好的办法。

In Angular2 I am creating a modal window which needs to be toggled on and off. During the development I stumbled upon something weird:

When I change the activate variable inside my Modal class with an external button. The view is not updating.

Printing the activate variable in the console goes without any problem. I see the variable toggle between true and false.

It looks like I am missing code which forces the view to render with the new values.

Does anyone have an idea what I might be missing here?

The code below in a Plunkr

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;
  }

}

解决方案

Just because you inject a modal and get a modal, doesn't mean it is the modal instance you want. If you list it in providers Angular DI just creates an instance and passes it in, but this instance is not related to the <modal> tag at all

Use instead @ViewChild() to get a reference

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();
  }
}

For your example code it isn't necessary to get a direct reference at all anyway. You can use binding with @Input() and @Output(). If the component and the modal are not that closely related (if you use a global modal instance that can be utilized by the entire application a shared service with an Observable that notifies about value changes might be a better approach.

这篇关于Angular2组件视图上不通过方法价值变动更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！