开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在通过ViewContainerRef创建的OnPush组件发生更改后，Angular视图未更新

的问题可能是由以下原因引起的：

组件的变更检测策略：OnPush策略是Angular中的一种变更检测策略，它只会在组件的输入属性发生变化或者组件自身触发了事件时才会进行变更检测。如果使用了OnPush策略，并且没有正确触发变更检测，那么视图就不会更新。可以通过调用ChangeDetectorRef的markForCheck()方法来手动触发变更检测。
组件的输入属性：如果通过ViewContainerRef创建的组件的输入属性没有正确绑定或者没有及时更新，那么视图也不会更新。确保输入属性的绑定正确，并在需要更新时及时更新输入属性的值。
变更检测的触发时机：在通过ViewContainerRef创建的组件中，如果发生了变更但没有正确触发变更检测，那么视图就不会更新。确保在组件发生变更后，调用相应的变更检测方法，如markForCheck()或detectChanges()。
变更检测的范围：Angular的变更检测是基于组件树的，如果通过ViewContainerRef创建的组件不在变更检测的范围内，那么视图也不会更新。确保通过ViewContainerRef创建的组件在变更检测的范围内，可以通过将组件添加到变更检测的引用树中来实现。

总结起来，解决通过ViewContainerRef创建的OnPush组件发生更改后Angular视图未更新的问题，可以采取以下步骤：

确保组件的变更检测策略是OnPush，并在需要更新视图时手动触发变更检测。
检查并确保组件的输入属性正确绑定，并在需要更新时及时更新输入属性的值。
在组件发生变更后，及时调用相应的变更检测方法，如markForCheck()或detectChanges()。
确保通过ViewContainerRef创建的组件在变更检测的范围内，可以将组件添加到变更检测的引用树中。

腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：提供可扩展的计算能力，满足各种业务需求。详情请参考：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版（CDB）：高性能、可扩展的关系型数据库服务。详情请参考：https://cloud.tencent.com/product/cdb
云原生容器服务（TKE）：基于 Kubernetes 的高度可扩展的容器管理服务。详情请参考：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：提供丰富的人工智能算法和模型，支持开发者构建智能应用。详情请参考：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：提供全面的物联网解决方案，帮助开发者快速构建物联网应用。详情请参考：https://cloud.tencent.com/product/iothub
移动推送服务（信鸽）：为移动应用提供稳定、高效的消息推送服务。详情请参考：https://cloud.tencent.com/product/tpns

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Angular 动态创建组件

本文我们将介绍在 Angular 中如何动态创建组件。...我们的自定义组件最终是一个实际的 DOM 元素，因此如果我们需要在页面中插入该元素，我们就需要考虑在哪里放置该元素。创建组件容器在 Angular 中放置组件的地方称为容器。...通过 ViewContainerRef 实例，我们可以基于 TemplateRef 实例创建内嵌视图，并能指定内嵌视图的插入位置，也可以方便对视图容器中已有的视图进行管理。...简而言之，ViewContainerRef 的主要作用是创建和管理内嵌视图或组件视图。...根据以上需求，更新后的代码如下： import { Component, ViewChild, ViewContainerRef } from '@angular/core'; @Component(

3.7K1 0

详解ANGULAR2组件中的变化检测机制（对比ANGULAR1的脏检测）

另外对于单次变化检测，每个组件只检查一次。 OnChanges 当组件的任何输入属性发生变化的时候，我们可以通过组件生命周期提供的钩子 ngOnChanges来捕获变化的内容。...也许你已经知道了，我们刚才在 AppComponent 中模型更新了，但视图却未同步更新的原因。...，需执行变化检测，从而更新视图。...Observables 使用 Observables 机制提升性能和不可变的对象类似，但当发生变化的时候，Observables 不会创建新的模型，但我们可以通过订阅 Observables 对象，在变化发生之后...，进行视图更新。

2.9K9 0

Angular DOM 抽象概述

通过 ViewContainer Ref 实例，我们可以基于 TemplateRef 实例创建内嵌视图，并能指定内嵌视图的插入位置，也可以方便对视图容器中已有的视图进行管理。...简而言之，ViewContainerRef 的主要作用是创建和管理内嵌视图或组件视图。...示例了解完 ViewContainerRef 对象的作用，我们来更新一下之前的 HelloWorldComponent 组件： @Component({ selector: "hello-world...在 Angular 中支持两种类型视图： Embedded Views - Template 模板元素 Host Views - Component 组件创建 Embedded View ngAfterViewInit...对于列表中声明的每个组件，Angular 将会创建对应的一个 ComponentFactory 对象，并将其存储在 ComponentFactoryResolver 对象中。

3.5K3 0

ElementRef & TemplateRef & ViewContainerRef

(this.tplRef); } } TemplateRef：用于表示内嵌的 template 模板元素，通过 TemplateRef 实例，我们可以方便创建内嵌视图(Embedded Views)...，且可以轻松地访问到通过 ElementRef 封装后的 nativeElement。...需要注意的是组件视图中的 template 模板元素，经过渲染后会被替换成 comment 元素。 ViewContainerRef：用于表示一个视图容器，可添加一个或多个视图。...通过 ViewContainer Ref 实例，我们可以基于 TemplateRef 实例创建内嵌视图，并能指定内嵌视图的插入位置，也可以方便对视图容器中已有的视图进行管理。...简而言之，ViewContainerRef 的主要作用是创建和管理内嵌视图或组件视图。

1.2K2 0

Angular开发实践（五）：深入解析变化监测

什么是变化监测在使用 Angular 进行开发中，我们常用到 Angular 中的绑定——模型到视图的输入绑定、视图到模型的输出绑定以及视图与模型的双向绑定。...简单来说，变化监测就是 Angular 用来监测视图与模型之间绑定的值是否发生了改变，当监测到模型中绑定的值发生改变时，则同步到视图上，反之，当监测到视图上绑定的值发生改变时，则回调对应的绑定函数。...Angular并不是捕捉对象的变动，它采用的是在适当的时机去检验对象的值是否被改动，这个时机就是这些异步事件的发生。...paramOneVal发生了改变）检测 paramTwo 是否发生了改变：没有发生变化最后，因为 DemoChildComponent 再也没有了叶子节点，所以变化监测将更新DOM，同步视图与模型之间的变化...Angular 在整个运行期间都会为每一个组件创建 ChangeDetectorRef 的实例，该实例提供了相关方法来手动管理变化监测。

1.7K8 0

Angular 6.x 指令快速入门

指令简介 Angular 的指令分为三种：组件（Component）：用于构建UI组件，继承于 Directive 类属性指令（Attribute Directive）：用于改变组件的外观或行为...（图片来源于网络）第一节 - 创建指令在 Angular 中，我们可以使用 HostBinding 装饰器，实现元素的属性绑定。...>Hello, Angular `, }) export class AppComponent { } 第四节 - 获取宿主元素属性值在 Angular 中，我们可以通过 Attribute...在 Angular 中，我们可以通过 ViewChild 装饰器来获取视图中定义的模板元素，然后利用 ViewContainerRef 对象的 createEmbeddedView() 方法，创建内嵌视图...在应用 NgTemplateOutlet 指令时，我们可以通过 [ngTemplateOutletContext] 属性来设置 EmbeddedViewRef 的上下文对象。

3.2K4 0

angular5面试题_大数据面试题

可以方便的生成angular app、component、service 等等，并且可以通过参数，按照自己的需求去创建。可以说是angular开发必不可少的利器。...Angular提供了一种平滑的机制，通过它我们可以将这些依赖项注入我们的组件和指令中。因此，我们只是在构建依赖关系，这些依赖关系可以在应用程序的所有组件之间注入。...脏值检测的基本原理是存储旧数值，并在进行检测时，把当前时刻的新值和旧值比对。若相等则没有变化，反之则检测到变化，需要更新视图。 angular2中有了Zone.js。...开发者可以根据场景来设置更加高效的变化检测方式：onPush。onPush策略，就是只有当输入数据的引用发生变化或者有事件触发时，组件才进行变化检测。 NgFor应该伴随trackBy方程使用。...Module 延迟加载（Lazy-loading）当一个项目做得很大后，为了提高首屏加载速度，可以通过Lazy-loading，当访问到某些具体的url时，才加载那些不常用的feature module

4.3K2 0

【Angular教程】组件动效u002F动态组件u002F视图封装模式

在我们的app组件中放置一个div和两个按钮来模拟 <div [@flyIn]="isIn ?...前面两篇涉及到<em>的</em><em>组件</em>都是<em>通过</em>标签<em>的</em>形式来使用<em>的</em>,当然也是使用频率最多<em>的</em>一种方式,但在<em>Angular</em>中还给我们提供了另外一种<em>组件</em><em>的</em>使用方式,<em>通过</em>ts代码来动态组合<em>组件</em> 动态<em>的</em><em>组件</em>也需要我们<em>在</em>父<em>组件</em>中提供一块区域...: <em>ViewContainerRef</em>; 定义我们实际需要挂载进来<em>的</em><em>组件</em>,HW<em>组件</em>我们临时<em>创建</em>一个用来演示 hwComp!...来对加载<em>的</em><em>组件</em>做操作了, 使用完<em>组件</em><em>后</em>一定记得hwComp.destroy()进行销毁 <em>视图</em>封<em>视图</em>封装模式 <em>视图</em>封装模式 <em>通过</em>改变<em>组件</em>装饰器<em>的</em>encapsulation属性可以单独控制每个<em>组件</em><em>的</em>封装模式...,模式<em>的</em>特点是接受全局样式<em>的</em>影像,但不影响其他<em>组件</em>样式 None: 样式会加载到全局,无作用域,无法达到隔了<em>的</em>效果,容易<em>发生</em>意外情况。

8954 0

ionic3应该善用组件和指令

在angular1时代，组件和指令是一回事，即严格来说，没有组件这概念，只有指令，而到了angular2时代，虽说组件仍是一种特殊的指令，但已经有一定目的明显区分开来，分别用Directive和Component...来标识，用cli生成命令就如下所示： ionic g directive 指令名 ionic g component 组件名要说指令和组件的区别，简单说是不带视图和带视图的区别，直观效果是：一个为原有标签动态添加功能...TemplateRef用来访问组件的模板，而ViewContainerRef可作为视图内容渲染器，将模板内容插入至DOM中。组件这个不必说了，我们用得最多的便是组件。...与其他指令不同，它描述的是一个视图，是用户可以直接看到的东西。自定义属性指令实例：创建一个bgColor属性指令，支持传入颜色名参数，设置目标标签的背景色 1）创建指令。...为实现该指令，要借用TemplateRef和ViewContainerRef，TemplateRef用来访问组件的模板，而ViewContainerRef可作为视图内容渲染器，将模板内容插入至DOM中。

3.5K4 0

angular4实战（4）ngrx

定义loading的action和reducer 在项目中创建ngrx文件夹，并在之下创建action和reducer文件。...关联store ngrx的关联通过在app.module.ts将StoreModule注入reducer。...而在本例中，通过reducer返回的是一个新的值（一般是一个新的对象），新的值变化也会引起组件检查。...高中英语水平翻译一下：async这个管道，会返回订阅的Observe ,promise对象的最新的值，当观察者发现值有改变时，就会触发组件的检查策略，并且在组件销毁时也会自动的去取消订阅避免内存泄漏。...在本例中，如果把async这个过滤器取消的话，会造成一直loading，因为组件无法在监听到控制loading值的改变，也就无法更新视图了。

1.1K3 0

Angular 重磅回归

就在那个时候，Google 重写了 AngularJS，创建了一个全新的框架 Angular 2+。然后在很长的一段时间里，Angular 团队都在重写名为 Ivy 的基础视图引擎。...Nicoll 说，该框架的改进主要体现在以下三个方面。我们有必要重新对它进行审视。移除模块在 Angular 中，最小的代码块不是组件，而是模块。...她补充说，支持 Angular 应用程序基础结构的工具和依赖项仍在发展，只是还没有达到这种程度。 “我想说，一定要从组件中删除模块，或者在开发新组件或管道时不再使用它们。...添加信号 Nicoll 表示，Angular 正在添加信号，这为它的“内置响应性原语”。信号将使开发人员能够轻松管理和响应应用程序中的更改。...信号仅在需要时更新，这可以提高大型应用程序的性能。信号可用于创建复杂的状态管理模式，例如 Redux 和 MobX。

2082 0

Angular 17 有什么新功能？

angular.dev Angular 团队最近一直在进行沟通，通过现场活动来展示 Angular v17 的新功能，以及一个名为 angular.dev 的新网站，这将是未来的官方网站。...：TestBedflushEffects TestBed.flushEffects(); 这是因为效果时间发生了一些变化：它们不再由更改检测触发，而是通过微任务队列进行调度（喜欢或）。...以前，在读取模板中的信号时，Angular 会标记组件当信号更新时，它的所有祖先都肮脏（就像目前在组件被标记为检查时所做的那样）。...它现在更聪明了，只在信号更新时将组件标记为脏，而不是它的所有祖先。它仍然会检查整个应用程序树，但是算法会更快，因为某些组件将被跳过。...OnPush 我们还没有办法编写纯基于信号的组件，不需要 ZoneJS，但它最终应该会到来！ styleUrls 字符串修饰器的 and 属性现在可以是字符串，而不是字符串数组。

5553 0

AngularDart Material Design 弹出框顶

即使此组件支持ChangeDetectionStrategy。对于在示例中测试的案例的OnPush，它没有设置ChangeDetectionStrategy。...这意味着可以在OnPush模式下在另一个组件中使用此组件，但由于任何此类实现都需要所有内容子项支持OnPush，因此由实现者自行决定。...source PopupSource 设置应相对于弹出窗口创建的源。 trackLayoutChanges bool 设置是否应跟踪源以进行更改。...visibleChange Stream 弹出窗口的visible属性发生更改时触发的同步事件（例如，从false变为true或true变为false）。...与onOpen和onClose不同，这在事件完成后发生。 MaterialPopupExample 查看示例，查看源码。

2.4K3 0

AngularDart 4.0 高级-结构指令顶

Angular不断检查可能会影响数据绑定的更改。无论组件在做什么，它都会继续这样做。虽然看不见，但组件及其所有后代组件都会占用资源。性能和记忆负担可能很大，响应性可能会降低，用户什么也看不到。...变量的作用域限于重复模板的单个实例。您可以在其他结构指令的定义中再次使用相同的变量名称。您通过在＃(#var)前缀加上变量名称来声明一个模板引用变量。引用变量是指其附加的元素，组件或指令。...TemplateRef和ViewContainerRef 像这样一个简单的结构指令从Angular生成的中创建一个嵌入式视图，并将该视图插入与指令的原始宿主元素相邻的视图容器中...您将通过TemplateRef获取内容并通过ViewContainerRef访问视图容器。你在指令构造函数中注入这两个类作为类的私有变量。...如果条件为假并且视图尚未创建，请告诉视图容器从模板创建嵌入的视图。如果条件为真并且当前显示视图，则清除且销毁视图的容器。没有人读取myUnless属性，因此它不需要getter。

16K2 0

Angular 13 发布：全面弃用 View Engine

Component API 的更新在 Angular v13 更改之前，动态创建组件需要大量样板代码。...Ivy 创造了使用 ViewContainerRef.createComponent 实例化组件的机会，而无需创建关联的工厂。...结束对 IE11 的支持结束 IE11 的支持后： Angular 可以通过原生的 Web API 使用更现代浏览器功能；可以删除 IE 特定的 polyfills 和代码路径使得应用程序更小，...；支持 TypeScript 4.4； Angular 测试的改进 TestBed 现在在每次测试后能更好地销毁测试模块和环境； DOM 在每次测试后都会被清除。...Angular 组件更新所有基于 MDC 的组件都经过评估，在对比度、触摸目标、ARIA 等方面满足更高的 a11y 标准。

2.7K2 0

Angular2 脏检查过程

在本文中我将会深入讨论Angular 2 中的变更检测系统。高层次概览一个Angular 2 应用就是一颗组件树。 Angular 2 应用是一个反馈系统，变更检测是它的核心。...我们采用比较激进的方式使用不可变对象，那么在大多数时间里面，变更检测树里面大块地方都会处于禁用状态。这一机制是如何实现的并不重要。你只要把变更检测策略设置为OnPush就可以了。...请注意，组件仍然可以拥有可变的状态，只要这个状态只会因为输入属性发生改变而改变，或者因为组件模板内部触发的事件而改变即可。OnPush策略唯一禁止的事情是依赖于共享的可变状态。更多细节请点这里。...这样一来，我们就可以在变更检测树里面跳过这个组件的子树，直到发生这样的事件为止。在触发事件之后，我们可以对这颗子树进行单次检测，然后立即禁用直到发生下次变更。...最后，在检测过程中的某个不确定的地方，视图会被更新。这种系统非常难以debug。如上面的例子所示，在Angular 2 里面使用可观察对象不会出现这种问题。

2.6K8 0

Angular ViewChild和ViewChildren

ViewChild Angular 为我们提供 ViewChild 和 ViewChildren 装饰器来获取模板视图中匹配的元素。ViewChild 是属性装饰器，用来从模板视图中获取匹配的元素。...视图查询在 ngAfterViewInit 钩子函数调用前完成，因此在 ngAfterViewInit 钩子函数中，就能正常获取查询的元素。...现在我们先来更新一下 AuthFormComponent 组件（关于它的出身，可以浏览 “Angular 内容投影” 这篇文章），即把下面的消息提示封装为组件。...，我们也需要同步更新组件类，即引入 ContentChildren 装饰器，并且在 ngAfterViewInit 生命周期内更新 AuthMessageComponent 组件的 days 属性值。...为了能够支持跨平台，Angular 通过抽象层封装了不同平台的差异，统一了 API 接口。如定义了抽象类 Renderer2 、抽象类 RootRenderer 等。

2.7K2 0

Angular2 之结构型指令几个概念

隐藏元素的利弊当我们隐藏元素时，组件的行为还在继续。它仍然附加子啊它所属于的DOM元素上，它仍然在监听事件。angular会继续检查哪些能影响数据绑定的变更。...弊如果我们很快再次使用这个组件的时候，重建组件的代价是非常大的。当ngIf重新变成true的时候，angular会重新创建该组件及其子树。angular会重新运行每个组件的初始化逻辑。...总结基于上面的利弊分析，无论是我们在使用内置的指令还是使用自定的指令的时候，我们应该自己分析提添加、移除元素以及创建和销毁组件的后果。... 这时候显示的内容是'Hip! Hooray!'，在Angular的控制下，DOM的效果是不同的。 ?...* 我们通过TemplateRef来访问模板。渲染器是ViewContainerRef。 * 我们把它们都作为私有变量注入到构造函数中。

3K2 0

Angular学习（02）--Angular-CLI命令

安装的方式就不讲了，要么直接使用 WebStrom 内置的，要么借助 npm 下载一个，要么通过 WebStrom 创建的 Angular 项目的 package.json 中就会自动配置一个 cli...，比如实时更新等目的 server s 编译项目，并让它运行起来，且默认支持实时更新修改 new n 创建新项目，生成项目初始骨架，默认包括根模块、根视图，还有基本的各种配置文件 e2e e 编译并运行项目...组件声明在相应的 declarations 列表中。...--changeDetection=Default|OnPush 设置改变组件的检测策略，默认 Default。...ng g directive 这个是创建指令的命令，组件其实是指令的一种，所以，上面介绍的关于组件命令中的各种选项配置，在指令这里也基本都可以使用，这里不列举了，清楚相关默认文件来源后，不懂的，去翻阅下就可以了

2.6K1 0

Angular v18 现已推出！

这与使用 zone.js 的应用程序类似，几乎没有区别。借助 zone.js，Angular 会在应用程序状态可能发生变化的任何时间运行更改检测。...如果你的组件与 Angular 的 ChangeDetectionStrategy.OnPush 更改检测策略兼容，那么它们也应该与无区域兼容，这将使它们的过渡无缝衔接！...在处理了开发人员的反馈并完善了我们的 Material 3 组件后，我们很高兴将它们升级为稳定版！...例如，Bill.com 分享说，通过使用，他们将一个应用程序的捆绑包大小减少了 50%。今天，可延迟的视图现在很稳定！您可以在应用程序和库中使用它们。...在引擎盖下，它使用 Vite 和 esbuild 来取代以前的 webpack 体验。对于大多数应用程序，开发人员可以通过更新其angular.json来更新到新的构建系统。

861 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭