在Angular2中扩展组件更改检测
在Angular2中，扩展组件的更改检测是通过使用ChangeDetectorRef类来实现的。ChangeDetectorRef是Angular的变更检测器，它负责检测组件及其子组件的变化，并在必要时更新视图。
要在Angular2中扩展组件的更改检测，可以按照以下步骤进行操作：
- 导入ChangeDetectorRef类：
- 导入ChangeDetectorRef类：
- 在组件的构造函数中注入ChangeDetectorRef：
- 在组件的构造函数中注入ChangeDetectorRef：
- 在需要进行更改检测的地方调用ChangeDetectorRef的
detectChanges()方法： - 在需要进行更改检测的地方调用ChangeDetectorRef的
detectChanges()方法：
通过调用detectChanges()方法，Angular会立即检测组件及其子组件的变化，并更新视图。这对于在异步操作或手动更新数据后需要立即更新视图的情况非常有用。
扩展组件的更改检测在以下情况下特别有用：
- 异步操作：当组件中的数据在异步操作后发生变化时，可以使用ChangeDetectorRef手动触发更改检测，以更新视图。
- 第三方库集成：当与第三方库集成时，可能需要手动触发更改检测，以确保视图及时更新。
- 手动更新数据：当手动更新组件的数据时，可以使用ChangeDetectorRef手动触发更改检测，以更新视图。
总结起来，通过使用ChangeDetectorRef类，我们可以在Angular2中扩展组件的更改检测，以实现及时更新视图的需求。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动应用托管）：https://cloud.tencent.com/product/mab
- 云数据库（CDB）：https://cloud.tencent.com/product/cdb
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 云存储（COS）：https://cloud.tencent.com/product/cos
相关·内容
我知道AngularJs中的数据绑定概念是一种简单的脏检查机制。在谷歌的I/O视频中，他们说，他们优化了Angular2中的数据绑定/更改检测。它在Angular2中是如何工作的
浏览 0提问于2016-09-20得票数 0
2回答
我是Angular2和TypeScript的新手。我目前正在从事一个项目，不幸的是，我无法理解OnPush所做的事情：
changeDetection : ChangeDetectionStrategy.OnPush
我找了很多东西，但没有找到正确的答案。
有人能给我解释一下吗？例子可能是值得赞赏的。
浏览 12提问于2017-08-22得票数 1
回答已采纳
在中，通过允诺检索的数据被提取为Hero[]，如中所描述的。与提取逻辑不同，Observable可以与不纯的一起使用。
如果我使用Observable，会有任何UI性能的提高吗？如果是这样的话，是怎么做的？
浏览 2提问于2017-03-14得票数 1
回答已采纳
2回答
我想知道，是否所有的异步事件和回调都可以通过包装一个区域中的所有组件逻辑(包括组件内的非组件指令的逻辑)来追溯到特定的源组件，那么假设所有的更改都遵循单向流，那么只需要检查该源组件以及任何具有来自源组件的更改输入的子组件的更改。
这是理解的声音吗？
此更改检测策略在Angular2中可用吗？
为什么Angular2在任何异步(XHR)事件之后检测所有组件上的更改？
浏览 2提问于2016-06-28得票数 2
angular2如何执行更改检测默认策略？我已经看过一些与变更检测相关的帖子，得到了一些细节，比如“angular2为每个组件创建变更检测器”。
现在举个例子，如果我有4个组件(comp1、comp2、comp3和comp4)，而我更改了comp4属性，那么是通过所有组件还是单个组件执行更改检测呢？
你能提供一些与上述信息相关的代码教程链接吗？
浏览 0提问于2017-08-21得票数 3
考虑Angular2中的以下组件树结构
A
B C
D E F G
如果G通过单击C发出一个事件，C不会进一步执行该事件。
html
<div (click)="update($event)"></div>
component
@Output() myOutputName = new EventEmitter();
update(event) {
this.myOutputName.emit('some vlaue');
}
变更检测是在从A开始的所有节点中运行，还是从C开始，并且只影响F和G？
浏览 0提问于2016-04-08得票数 3
假设我在我的service.ts中有一个service.ts，它在角的上下文之外。noificationHandler()由第三方调用，noificationHandler()基本上使用一个数组并将数组发送给订阅了他的服务的组件。
service.ts
public mySubject: Subject<any> = new Subject();
public myObservable = this.mySubject.asObservable();
constructor() {
this.registry.subscribe("n
浏览 0提问于2017-03-23得票数 38
我有一个侧导航组件，可以在很多页面上使用。这不是一个单一的网页应用程序。它动态地加载在切换菜单的父组件上。ContentChild用于获取子组件的句柄，以便通过设置@input overlayHidden来切换。问题是ContentChild是空的。
打开调试控制台运行此。单击第一页中的“仪表板”，然后从第二页单击"Toggle菜单“以查看空指针。
我做错了什么？
这是密码。
import { Component, Input} from 'angular2/core';
import { Router } from 'angular2/router';
浏览 0提问于2016-03-13得票数 1
3回答
试图弄清楚如何在Angular2中调整事件大小时获得窗口宽度。下面是我的代码：
export class SideNav {
innerWidth: number;
constructor(private window: Window){
let getWindow = function(){
return window.innerWidth;
};
window.onresize = function() {
this.innerWidth = getWindow();
浏览 0提问于2016-02-21得票数 30
我有一个ListComponent和EntryComponent，用于在列表中附加一个项目。当通过DataService将项推入列表时，列表不会在ListComponent中更新。对于angular2的工作方式有什么想法吗？
名单处：
import {Injectable} from "angular2/core";
@Injectable()
export class DataService{
public items:Array<any> = [];
addItem(item:string):void{
this.item
浏览 2提问于2016-02-09得票数 0
2回答
给定以下组件：
@Component({
selector: 'compA',
template: template: `<compB [item]=item></compB>`
})
export class CompA {
item:any;
updateItem():void {
item[name] = "updated name";
}
}
@Component({
selector: 'compB',
template: templa
浏览 0提问于2017-07-06得票数 25
回答已采纳
我知道我不是第一个问这个问题的人，但我在前面的问题中找不到答案。我把这个放在一个组件里
<div class="col-sm-5">
<laps
[lapsData]="rawLapsData"
[selectedTps]="selectedTps"
(lapsHandler)="lapsHandler($event)">
</laps>
</div>
<map
[lapsData]="rawLa
浏览 6提问于2016-01-14得票数 179
回答已采纳
ReactJ有虚拟DOM来呈现更改。Angular2不包含虚拟DOM。Angular2和ReactJS一样是反应性的。对于angular2中的任何更改，整个组件不会被更改，但是组件的部分将被更改。Angular2用什么来显示组件部分的变化呢？编辑：，让我更具体一些。我知道检测变化是方法。但是变化检测发生在模型上。一旦更改检测、单向循环运行，就必须对真正的DOM进行操作。这是一个特定的点，角度使用虚拟DOM概念，如果不是，则使用什么替代操作实际DOM。
浏览 9提问于2016-10-18得票数 0
2回答
我在试着了解角质2是如何工作的。我目前正在阅读管道文档：，下面的示例如下：
import {Component} from 'angular2/core'
@Component({
selector: 'hero-birthday',
template: `
<p>The hero's birthday is {{ birthday | date:format }}</p>
<button (click)="toggleFormat()">Toggle Format</b
浏览 3提问于2016-01-05得票数 1
回答已采纳
在Angular2中，OnPushObserve和OnPush有什么不同？我知道所有关于onPush策略和观察值的知识..但是想知道这两个之间的区别。也许ng2开发人员可以分享更多信息...
文档似乎过时了：
问候
Sean ( Angular 2样板应用：)
浏览 0提问于2016-01-11得票数 3
3回答
我想显示一个dataList。有些值是从函数中计算出来的。angular2似乎多次调用calculate函数。
<tr *ngFor="let data of dataList">
<td>{{ data.no }}</td>
<td>{{ data.name }}</td>
<td>{{ calculateFunction(data.price) }}</td>
</tr>
控制台将输出"calculate...“很多次，比dataList.
浏览 0提问于2017-07-20得票数 14
回答已采纳
我正在开发angular2应用程序，其中有一个弹出子组件的父组件。
@ViewChild(childPopupComponent) case: childPopupComponent;
我想做的是:当从子组件(在父组件中弹出)按保存按钮时，重新呈现父组件以进行反射(而不是重新加载整个页面)。
我知道这将重新呈现当前组件，但是如何从@ViewChild one中实现这一点？
this.ref.detectChanges();
浏览 1提问于2017-09-25得票数 3
回答已采纳
3回答
我正在创建一个调用Facebook javascript api的Facebook服务，并且想知道当我的值更新时如何最好地实现更改检测。
我有一个UserService，它的currentUser属性是一个BehaviorSubject：
currentUser: Subject<User> = new BehaviorSubject<User>(new User(null));
当我想要更新用户以响应facebook javascript sdk告诉我用户已经登录或注销时，我会更新用户并需要在ApplicationRef上调用tick()
updateUser(use
浏览 2提问于2016-02-20得票数 17
我有一个子组件，它通过@Input()接收一些值
<my-component
[model]="node"
[required]="isRequired()"
>
</my-component>
正如您所看到的，[required]传递isRequired()方法的返回值。但它可能会变得非常需要性能，所以我想限制它被查询的频率。
有什么方法可以配置angular调用isRequired()的频率吗
浏览 6提问于2017-06-30得票数 2
回答已采纳
我有一个类UserList，它有一个私有的内部变量，被设计成只能用于访问器函数。如何在ngFor绑定中以性能良好的方式访问该内部列表？
class UserList {
private users:user[] = []
public addUser():void{..}
public removeUser():void{..}
public listUsers():user[]{
return this.users; //this is the only way to access the private users list
}
}
然后在某个部件..。
@
浏览 4提问于2018-01-08得票数 1
回答已采纳
我希望深入了解更改检测器如何在我们的应用程序中运行的细节。最近，我发现我们重新渲染应用程序的次数远远超出了我们的需要，于是我提交了一份。我已经能够修复所有我知道的渲染过多的地方，但现在我想要有一种简单的方法来确切地知道更改检测器何时运行，为什么它运行，以及运行时哪些组件是脏的。获取此信息的最佳和/或最简单方法是什么？
更新:因此您可以在AppView.detectChanges中设置一个断点，以便在更改检测器运行时中断，然后单步执行该代码，您可以看到正在检查的内容。然而，我仍然不确定如何轻松地确定是什么触发了更改检测器，或者是谁在标记要检查的组件。
浏览 2提问于2016-11-29得票数 8
1回答
我工作在一个角度管道来处理和过滤日志。
我的烟斗是这样的
import {Injectable, Pipe,PipeTransform} from '@angular/core';
@Pipe({
name: 'logFilter'
})
@Injectable()
export class logFilterPipe implements PipeTransform {
transform(items: any[], args: any[]): any {
//console.log(items);
if (!args || ar
浏览 2提问于2016-08-24得票数 1
回答已采纳
在Angular2中，每个级别组件的更改检测可以不同吗？换句话说，如果我有
comp1 detection onPush
comp2 detection onPush
comp3 detection default
comp4 detection onPush
如果我将更改应用到comp3，除非comp2更改，否则它是否不会更新UI？我问的原因是因为我看到了一个奇怪的行为，我想这可能是父母组件的错误…
因此，换句话说，您可以在组件树的不同级别混合ChangeDetection策略检查吗？通过zone.js实现的框架是否足够智能，能够根
浏览 0提问于2016-03-03得票数 2
一旦在某个组件中定义了ChangeDetectionStrategy选项，它在应用程序组件树中的所有后代组件中都是决定性的吗？也就是说，如果它在某个组件中定义为ChangeDetectionStrategy.OnPush，那么它的所有后代组件都会有这种行为吗？谢谢。
浏览 1提问于2016-08-17得票数 0
出于性能原因，我试图在组件上设置手动更改检测。
应用程序的结构: App -> Book(s) -> Page(s)
我订阅了AppComponent中的一个可观察到的方法，然后运行ChangeDetectorRef的"markForCheck“方法。
这似乎触发了BookComponent中的BookComponent方法(我标记为update的组件的子组件)。
这让我相信父组件中的"markForCheck“也会更新所有的子组件。
但是，即使ngAfterContentChecked在子组件(BookComponent)中执行，该组件的模板也不会更新！
我是否应
浏览 0提问于2016-05-27得票数 0
回答已采纳
假设我有以下场景：
@Component({
selector: 'my-app',
template: `
<my-component
[myAttr]="myAttr"
></my-component>
<button (click)="onClick()">Click</button>
`,
directives: [MyComponent]
})
class AppComponent {
myAttr:
浏览 0提问于2016-03-16得票数 2
回答已采纳
1回答
我正试图完全理解使用Angular2 final进行更改检测。
这包括：
处理变化检测策略
从组件中附加和分离变化检测器。
我以为我已经对这些概念有了一个相当清晰的概述，但是为了确保我的假设正确，我写了一个小柱塞来测试它们。
我对这个问题的总体理解是正确的，但在某些情况下，我有点迷失了方向。
下面是柱塞：
对柱塞的快速解释：
很简单：
一个父组件，您可以在其中编辑一个将被传递给两个子组件的属性：
关于将更改检测策略设置为OnPush的子级
关于将更改检测策略设置为默认的子级
父属性可以通过以下两种方法传递给子组件：
更改整个属性对象，并创建一个新的属性
浏览 3提问于2016-10-30得票数 8
回答已采纳
我有一个角2指令，当表放置在可滚动的div中时，使给定表的头(th)保持固定。它根据单元格上数据的大小调整列标题的大小，反之亦然。直到角度2 RC1，它才能正常工作，但在我升级到RC4之后，它就停止工作了。
过了一段时间，我意识到由框架触发的"AfterViewChecked“事件的数量已经减少了，这可能是由于一个问题得到了解决。现在的问题是，我的指令不再触发重新计算逻辑来调整表头的大小。
是否可以从父表中绑定或捕获事件，以触发重新计算过程？
指令代码大致如下：
export class TableFixedHeaderDirective implements AfterViewChe
浏览 7提问于2016-07-20得票数 3
回答已采纳
我希望能够在angular2之外的变量发生变化时监视和更新。因此，假设我在一个外部javascript文件中有这样的内容：
var test = 1;
如何将此变量绑定到组件中的属性？
@Component({
...
})
export class MyComponent {
watchy = window.test;
}
根据的说法，这显然是可行的。
但事实并非如此。如果我在控制台中更改了变量，则该变量不会在模板中显示。我是不是遗漏了什么？
浏览 2提问于2016-04-24得票数 7
回答已采纳
1回答
我读过许多关于变更检测的文章，但没有清楚地了解它是如何工作的，以及如何呈现视图。就像在react中一样，我们有虚拟dom和diff算法，它只呈现通过创建dom补丁而改变的UI的一部分，因此类似地，角如何知道UI的哪一部分需要更改。
更改检测如何决定在视图中呈现/替换哪些更改？
浏览 3提问于2016-04-12得票数 1
回答已采纳
我碰巧在里看到了。它使用OnPush。
ChangeDetectionStrategy在Angular2中是什么，什么时候使用OnPush Vs默认？
浏览 0提问于2017-03-01得票数 17
回答已采纳
我正在创建一个通用的甘特可视化组件。
显示周和任务的部分是通用的，但是每一行都有一个我希望动态的标题，例如，当显示每个用户的任务列表时，我想要放置一些用户数据和一些操作按钮，但是当按项目显示任务时，我想要显示项目数据和项目操作按钮。
我在下面实现了一个解决方案：
一切看起来都很好，我在每个场景中都看到操作按钮的加载方式不同，但用户或项目数据却不一样。另外，在单击console.log(this.data.name)按钮时，我正确地看到了控制台中的数据，但是如果我试图在模板{{ data.name }}上打印，我什么也看不到。
我在控制台中看到以下错误：
错误:表达式检查后发生了更改。以前的值
浏览 1提问于2017-02-22得票数 17
回答已采纳
我从父组件返回一个可观察对象，并将其传递给子组件。我在子组件中订阅它。
以下是步骤。
在父组件中，我在模板中运行for循环。在模板中，我调用了一个函数，该函数返回一个observable。并将其传递给子组件。
在子组件中，我订阅它，然后在子组件上，我取消订阅它。
问题是，当我在循环中有多个项目时，apis会被连续调用，并在无限循环中运行。
敬请指教。
浏览 0提问于2017-11-23得票数 0
我在我的angular2应用程序中遇到了一个非常有趣的问题，我在这里简化了情况。
这是AppComponnet
export class AppComponent {
tabs: any = [];
viewModes = [
{ label: "列表查看"},
{ label: "树状图" },
];
constructor(private changeRef: ChangeDetectorRef) {}
addTab() {
var worker = new Worker(
浏览 23提问于2017-01-20得票数 1
回答已采纳
我所知道的是，我们调用detectChanges()来触发本地更改检测检查。我已经看到了detectChanges()在ngOnChanges(变更)钩子中被调用的一些代码，我想知道为什么有人会想要这样做呢？我的意思是，如果没有检测到变化检测，ngOnChanges就不会被调用，对吗？那么为什么要在钩子的体内调用detectChanges呢？
@Directive({
selector: "[dateDisplay]"
})
export class DateDisplayDirective {
@Input() ngModel: Date;
@Inpu
浏览 5提问于2017-05-23得票数 0
3回答
我有一个用相当基本的JS制作的非角度页面，并认为尝试添加一些Angular2并将其用于一些新功能是一个很棒的主意。
我的计划是将一个Angular2组件绑定到一个由旧代码更新的对象，并使用Angular2魔术来更新一个UI块。
问题是，我无法说服Angular2对外部JS中的任何更改做出反应。做那件事有什么诀窍？谷歌搜索这个问题的尝试导致了Angular2 2的变化检测过程的深入解释，到目前为止，这并没有多大帮助。这是个糟糕的主意吗？
我发现了一个随机的Angular2小提琴，并黑了它，以显示问题。字符串被添加到“window.name”，但是直到从角边添加一个字符串：，才会看到它们。守则如下
浏览 1提问于2016-04-18得票数 2
回答已采纳
当我通过插值从模板中的组件调用一个方法时，我遇到了一个问题：{{get_method()}}。该方法运行，但在无限循环中，我不知道为什么。有什么帮助吗?？
方法的代码如下：
get_name() {
console.log("bonjour");
}
我在我的模板里这样称呼它：
{{get_name()}}
这就是结果：
浏览 9提问于2017-03-28得票数 9
回答已采纳
考虑一下这个
import {Component, OnInit, Input, OnChanges, DoCheck, ChangeDetectionStrategy, EventEmitter} from 'angular2/core'
@Component({
selector: 'child11',
template: `
<button (click)="change_obj()">Button in Child11</button>
<div>This is chi
浏览 0提问于2016-04-24得票数 3
我有一个对象数组(让我们称之为arr)。在我的组件在(change)方法中的一个输入中，我修改了这些对象的一个属性，但是在视图(*ngFor)中没有任何改变。我看到Angular2更改检测没有检查数组或对象的内容，所以我尝试了以下方法：
this.arr = this.arr.slice();
和
this.arr = [...this.arr];
但是视图没有改变，它仍然显示了旧的属性。在使用(change)的console.log()方法中，我得到了正确的数组。奇怪，但这个很管用：this.arr = [];，我也试过NgZone和markForCheck()。
浏览 15提问于2017-07-21得票数 50
回答已采纳
假设我想构建一个可以插入第三方页面的Angular2应用程序。第三方页面可能已经使用了Angular2 (可能在不同的版本中)。是否可以在第三方应用程序中引导我的角2应用程序？
<body>
<third-party-angular-app>
<third-party-component>
<my-angular-app>
</my-angular-app>
</third-party-component>
</third-party-angular-app>
&
浏览 2提问于2016-07-18得票数 2
回答已采纳
如何在使用ngFor多次渲染模板时提高性能？我有一种情况，我需要根据计数显示相同的模板。我正在使用*ngFor来做这件事。模板加载正确，但我担心需要重复显示几千次相同内容的performance.Because，加载模板后性能会变慢。我在这里做了一个柱塞演示。请在formarray中增加表单组的数量，差值为1000，系统将变慢或崩溃。这就是我创建This数组的方式，
for(var i=0;i<100;i++){
let dummyFormGroup=this.fb.group({
'name':[''],
'pl
浏览 0提问于2016-10-01得票数 9
回答已采纳
2回答
我有一个包含日期(用toLocaleString()格式化)和其他内容的组件列表。在这些组件中，有一个用于创建新组件的组件，其中包含一个带有用angulars FormBuilder构建的输入字段的表单。当我快速输入时，验证滞后和我输入的文本不会立即显示。
我假设角是重新复制所有组件，因为如果我不在其他组件中显示日期，我可以在没有延迟的情况下快速地输入。
是否有一种方法只更改我要输入的输入字段，因为所有其他组件都不能更改，或者toLocaleString()是问题所在？
浏览 1提问于2016-04-18得票数 2
我有以下代码：
it ("test detect change", async()=>{
let fixture= TestBed.createComponent(AppComponent);
let element1= fixture.debugElement.nativeElement.querySelector("h1");
expect(element1.textContent).toContain("come");
element1.textContent="new";
浏览 3提问于2017-09-23得票数 0
回答已采纳
我正在开发一个角度应用程序，在这个应用程序中我试图使用ng2-bootstrap。
下面是我的简单选项卡控件的demoComponent.ts
import { Component, View, Inject} from 'angular2/core';
import { CORE_DIRECTIVES } from 'angular2/common';
import { TAB_COMPONENTS } from 'ng2-bootstrap/ng2-bootstrap';
// webpack html imports
@View({
浏览 1提问于2016-01-15得票数 1
回答已采纳
1回答
我正在利用@ngrx/store和可观测数据。我有一个用户还原器，它设置有关用户的信息，包括用户的JWT。
将NavigationService注入根AppComponent，根AppComponent订阅user模型，并根据用户令牌的存在进行路由。UserService读取本地存储，并将结果发送给user还原器。
问题是，当我试图使用goToLogin()路由到主页时，我得到的错误below...which并没有给出多少信息。
我猜路由组件还没有设置。是否有一种方法在路由之前等待应用程序加载？还是下面的错误表明了另一个问题？
@Injectable()
export class Naviga
浏览 1提问于2016-02-20得票数 0
回答已采纳
当我们将一个model传递给子组件并且它修改了它时，这些值只反映在子组件的局部变量中，父组件不可用。我们是否可以通过引用将值从父级传递到子级。所以这些变化在那里也是可见的。
我已经在服务层使用observable实现了同样的方法。但是我们不能通过引用通过@Input传递吗
浏览 1提问于2016-10-26得票数 22
回答已采纳
我有一个公开的方法，我接触到了window。此方法与Component对话，并修改我在模板中看到的变量。但是，当我更改值时，*ngIf()不会被触发。
app.component
constructor(private _public: PublicService,) {
window.angular = {methods: this._public};
}
PublicService
export class PublicService {
constructor(
private _viewManager: ViewManagerComp
浏览 4提问于2016-10-11得票数 3
回答已采纳
我有一个基本的角度应用程序，包括以下三个组件：
汽车组件，它是主或父组件.
carousel-component ( car-component的子组件，*使用ng-content)
child-component (旋转木马子组件)
子组件中的按钮在单击时使用EventEmitter()发出一个事件。从柱塞中的代码可以看出，car组件(它是主组件或主组件)能够侦听并捕获其子组件(即，在car组件模板中更新的和{text})发出的事件。
然而，carousel-component是子组件的直接父级，它无法捕获相同的事件，并且在旋转木马组件中没有更新文本。
car-compo
浏览 4提问于2017-02-20得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
