Angular 观察组件变量角度5的变化

在AngularJS中，可以

$watch

查看控制器中的变量，如果变量从任何地方更改（从ng模型更改时的模板更改，或从控制器以编程方式更改），此触发器将被激活

我想知道是否有可能在Angular 5中实现相同的功能

我必须能够在不调用任何函数的情况下直接从模板更改变量，如下所示：

<button class="btn-link bc-2th" (click)="persistentComponentConfig.searchFiltersVisible = !persistentComponentConfig.searchFiltersVisible">
  FILTERS
</button>

在这两种情况下（实际上有很多），我必须在模型更改后触发另一个函数

我可以通过创建一个反应式表单并订阅它的“valueChanges”属性来实现这一点，但我不需要整个表单控制器，我只需要将一些属性存储在组件对象中，以控制一些模板*ngIf/hide/show指令，并将更改发送到我的

ngrx

存储区

我尝试使用Observables和BehaviorSubject创建它，但需要更多的样板文件，以便通过“next（）”将所有更改传播到我的存储中。我只是在寻找与AngularJS的

$watch

功能相同的东西

我怎么做呢

谢谢

看一下，尤其是

OnChanges

只要至少有一个数据属性更改其值，就会调用它。使用

SimpleChanges

对象调用它，该对象包括更改的属性及其值

从文档中：

ngOnChanges（更改：SimpleChanges）{
for（让propName进行更改）{
设chng=changes[propName]；
让cur=JSON.stringify（chng.currentValue）；
让prev=JSON.stringify（chng.previousValue）；
this.changeLog.push（`${propName}:currentValue=${cur}，previousValue=${prev}`）；
}
}

看一下，尤其是

OnChanges

只要至少有一个数据属性更改其值，就会调用它。使用

SimpleChanges

对象调用它，该对象包括更改的属性及其值

从文档中：

ngOnChanges（更改：SimpleChanges）{
for（让propName进行更改）{
设chng=changes[propName]；
让cur=JSON.stringify（chng.currentValue）；
让prev=JSON.stringify（chng.previousValue）；
this.changeLog.push（`${propName}:currentValue=${cur}，previousValue=${prev}`）；
}
}
使用
$watch
没有什么相同之处

一种常见的方法是对发出数据更改的类使用getter和setter。您必须手动订阅每一个。
使用
$watch
没有任何相同之处

一种常见的方法是对发出数据更改的类使用getter和setter。您必须手动订阅每个组件。
您可以尝试使用组件内变量的
get
和
set
函数。触发器应该在
set
函数中定义

这样：


  _searchFiltersVisible = null

  get searchFiltersVisible() : string {
    return this._searchFiltersVisible
  }

  set searchFiltersVisible(v: string) {

    // trigger any action you want
    // call another function, emit an event etc
    this.anyEvent.emit(v)

    this._searchFiltersVisible = v
  }


您可以尝试在组件中使用变量的
get
和
set
函数。触发器应该在
set
函数中定义

这样：


  _searchFiltersVisible = null

  get searchFiltersVisible() : string {
    return this._searchFiltersVisible
  }

  set searchFiltersVisible(v: string) {

    // trigger any action you want
    // call another function, emit an event etc
    this.anyEvent.emit(v)

    this._searchFiltersVisible = v
  }


变量是如何/何时更改的？发布一些示例代码怎么样？嗨！谢谢你的回复。该变量直接从我的模板或通过私有组件函数进行更改。我已经用我的一段代码更新了这个问题。无意冒犯，但你似乎滥用了$watch，并且想继续在Angular中使用这种糟糕的做法。如果变量更改时需要执行某些操作，则只需将更改封装到函数中，并调用该函数，而不是直接对字段进行变异。这都是关于OO设计的。是的，我知道这是一个糟糕的做法，我在AngularJS中完全避免了这一点。但在我当前的项目中，我创建了一个功能，使用这个库使我的应用程序的当前状态与本地存储保持同步：ngrx store localStorage。因此，我不需要只使用带有结构指令的动态模板，我需要将这些更改传播到我的存储并保存到localStorage，这样当用户刷新页面时，会保留最新的布局配置，如折叠菜单、可见元素等。您关于封装函数更改的建议完全有效，但我一直在寻找一种方法，只通过检测我的组件配置对象中的更改来自动完成，而不必在每次变异时调用函数，并保持模板的整洁。我的配置对象几乎有50个不同的属性，其中一些是4层嵌套的，通过封装函数中的更改并手动触发它们，这将非常烦人。没有办法做到这一点吗？也许是可以观测到的？再次感谢您的关注！变量是如何/何时更改的？发布一些示例代码怎么样？嗨！谢谢你的回复。该变量直接从我的模板或通过私有组件函数进行更改。我已经用我的一段代码更新了这个问题。无意冒犯，但你似乎滥用了$watch，并且想继续在Angular中使用这种糟糕的做法。如果变量更改时需要执行某些操作，则只需将更改封装到函数中，并调用该函数，而不是直接对字段进行变异。这都是关于OO设计的。是的，我知道这是一个糟糕的做法，我在AngularJS中完全避免了这一点。但在我当前的项目中，我创建了一个功能，使用这个库使我的应用程序的当前状态与本地存储保持同步：ngrx store localStorage。因此，我不需要只使用带有结构指令的动态模板，我需要将这些更改传播到我的存储并保存到localStorage，这样当用户刷新页面时，会保留最新的布局配置，如折叠菜单、可见元素等。您关于封装函数更改的建议完全有效，但我一直在寻找一种只有侦探才能自动完成的方法