问题标签 [angular2-changedetection]

问题

@ViewChild显示模板中的相应元素后最优雅的获取方式是什么？

下面是一个例子。Plunker 也可用。

组件.模板.html：

组件.component.ts：

我有一个默认隐藏其内容的组件。当有人调用show()方法时，它变得可见。但是，在 Angular 2 更改检测完成之前，我无法参考viewContainerRef. 我通常将所有必需的操作包装成setTimeout(()=>{},1)如上所示。有没有更正确的方法？

我知道有一个选项ngAfterViewChecked，但它会导致太多无用的调用。

答案（Plunker）

我有一个 List 对象，像这样

它基本上有一些 url，并且可以提供在这些 url 上找到的名称

现在我需要一个显示这些名称的组件：

到目前为止一切顺利，如果我这样使用它就可以了

但它不会在被调用时刷新somelist.addUrl(...)，因为它并没有真正改变任何东西。

一种解决方法是引入一些变化，如下所示：

并相应地使用 Lister：

但这似乎使调用者变得不必要的复杂。

我宁愿 somehome 让 Lister 本身“听”它的列表更改。

有没有办法做到这一点？

在 Angular-2 项目中始终使用是否是一个合理的约定？

在组件的装饰器中？除非有明确的理由使用默认策略？

我想更新我的应用程序视图，由服务中的事件触发。

我的一项服务注入了 ChangeDetectorRef。编译有效，但是当应用程序启动时我在浏览器中收到错误：No provider for ChangeDetectorRef!.

我想我需要将它添加到我的 AppModule 中，但我找不到任何文档表明它在我可以在那里导入的模块中。我尝试将类本身添加到导入数组中，但这会导致错误。尝试将其添加到模块中的提供程序数组时，我也遇到了错误。这是我的服务的简化版本：

和应用程序模块：

更新

从那以后，我尝试删除对 ChangeDetectorRef 的使用，但我仍然遇到同样的问题。我猜我更新系统 JS 配置的方式有问题。

我最初使用 angular-cli 创建了应用程序，并试图自己更新 Angular，因为他们没有更新。随着 Angular 2.0.0 的最终发布，他们更新了 angular-cli 以使用最新版本的 angular。所以我将尝试使用他们的升级程序，希望会更好。

更新 2

webpack/angular-cli 更新进展顺利。我现在使用 Angular 2.0.0 和 angular-cli 1.0.0-beta14 构建应用程序。我仍然在浏览器中遇到同样的错误。我尝试从服务中删除ChangeDetectorRef，但实际上并没有。我有两个服务。如果我从这两个服务中删除它，那么我的应用程序加载正常，并且运行良好，除了我试图使用ChangeDetectorRef的地方。一旦我将它添加回其中一个文件，浏览器就会抱怨无法找到它的提供者。

我尝试在我的模块中导入它，但它不是模块，所以编译器抱怨。我尝试在我的模块中将它列为提供程序，但它没有提供属性，因此转译器会抱怨。如果我尝试将其放入声明数组中，则会出现类似问题。

我正在将一个对象数组输入到一个从 HTTP 请求响应（异步）生成的组件中，并且我想用前三个数组元素填充一个不同的数组。

我想在从父输入分配第一个数组的同时填充新数组。

这是我的代码不起作用：

为什么我不能使用 setter 拦截输入数组的输入属性更改？什么是实现我想要的结果的好方法？

我正在尝试设置可以搜索的项目目录。我的目录组件有一些对 observables 的订阅。每当更新搜索词时，它都会将该查询应用于项目列表并返回匹配的项目。搜索功能位于一个单独的组件中，该组件执行过滤并向 searchService 发送一个值以指示它何时开始和停止搜索。我想通过单独的加载程序订阅来利用此值更改，并更新“isLoading”布尔值以在搜索功能运行时显示微调器。

目录.cmp.ts：

toggleLoader() 函数如下所示：

search.service.ts：

}

在我的组件模板中，我有这个设置：

因此，除了 isLoading 值之外，视图的每个方面都可以正常更新。但是 isLoading 的正确值会在正确的时间显示在控制台中（当发送搜索词并且过滤器正在运行时为 true，当返回新的股票数组并且 ngfor 更新时为 false）。视图中没有检测到更改。但是，我的 toggleLoader 调试按钮将正确更新视图。

我已经尝试了许多类似问题中发布的解决方案，例如将 toggleLoader 的主体包装在 zone.run() 中或使用 ChangeDetectorRef 手动调用更改检测。我什至可以尝试不使用 loadsubscription，而是在调用 search.transform 之前调用 toggleLoader 并在调用完成后再次调用，如下所示：

最小的插件： https : //plnkr.co/edit/lD4gZq 注意：在完整的应用程序中，搜索栏不是目录的子组件，这就是为什么搜索词更新要通过外部服务进行。

我一直在研究变更检测并试图解决这个问题一段时间，但老实说我无法弄清楚为什么这不起作用。任何帮助，将不胜感激。谢谢。

我有两个组件：BuilderComponent 和 InputTextComponent。通过拖放，我在 BuilderComponent 模板的 sortableList 元素中放置了一个指令。通过检查器，我可以看到指令出现在 sortablelist DOM 元素中：

如何强制 BuilderComponent 检测自上次编译后模板的内容发生了变化，然后使用新添加的指令重新渲染模板，以便我可以看到新编译的 InputTextComponent。

构建器组件：

输入文本组件：

任何想法？

提前致谢。

我想使用 canvas 元素在 Angular 2 中创建一个圆形进度条。我在 Angular 1 中完成了多个项目，但我对 Angular 2 和 TypeScript 完全陌生，所以我有点步履蹒跚……

我创建了一个ProgressCircle组件，并使其可注入，因此我可以在其他组件中使用它。此进度组件从父组件接收几个属性，这些属性确定进度圈的外观以及填充方式。

注意：我从一个旧的 ES5 项目中提取了这段代码。这可能表明。

现在，这工作正常。但是progress来自父组件的输入变量可能随时改变。如何在适当的时间触发重绘进度条？

在加载视图（因此调用 ngAfterViewInit）之前，我无法初始化进度条，否则它看起来很时髦，因为画布元素尚未完全初始化。我已经查看了 ngOnChanges 生命周期钩子，但它没有用，因为它在视图加载之前首先触发。

我的一个想法是让progress输入变量可观察，然后在钩子中订阅它ngAfterViewInit，但我不完全确定它是如何工作的。我还想我可以挂钩ngOnChanges并检查它是否是第一个更改（实际上 SimpleChange 类根据文档有这样的方法），但对我来说感觉有点骇人听闻。

将不胜感激任何指针！Angular 2 在我身上成长了，但它肯定需要很多时间来适应来自 Angular 1/ES5 的习惯。

在我的应用程序中，我想设置手动更改检测。为此，我将 ChangeDetectionStrategry 设置为 OnPush，并且每当组件中发生更改时，我都会使用 detectChanges 手动运行更改检测。

如果我在父组件上将 ChangeDetectionStrategy 设置为 OnPush，根据我的理解，即使我没有在子组件上将 ChangeDetectionStrategy 设置为 OnPush，它也只会在父组件上运行一次更改检测，并且只在子组件上运行一次。如果父组件有任何变化，我会在父组件中运行detectChanges()。如果子组件有任何变化，我会在子组件中运行 detectChanges()。

请建议这是正确的方法吗？还是有更好的方法？

其次，有没有办法检查它是否按预期工作并且没有对特定组件执行更改检测。

我正在编写一个 angular 2 应用程序，出于性能原因，我尝试在任何地方使用 ChangeDetectionStrategy.OnPush。我有一个复杂的组件需要 OnPush 才能顺利工作，它包含另一个显示表单的组件（使用 FormBuilder 创建）。我现在注意到，当我单击一个滑块时，它的内部值会更新（即 form.value），但滑块组件不会可视化这个新值，即它卡在旧位置。

我解决此问题的第一个想法是将叶组件的更改检测策略设置为 DEFAULT，但这没有效果，因为显然这也需要更改其父组件的更改检测策略（这在我的应用程序中是不可能的）。

然后我想出了这个主意：

但它没有效果。

是否有可能使 angular 2 表单在使用 OnPush 的组件内工作？