标签: angular2-changedetection

我有一个关于变化检测的简单问题.

我有一个组件和一个(全局)服务,里面有一个布尔值.如果该布尔值发生变化,如何让组件监听该布尔值并执行函数？

谢谢!

我有一个简单的场景,但只是无法让它工作!

在我看来,我在一个高度有限的盒子里显示一些文字.

正在从服务器获取文本,因此视图会在文本进入时更新.

现在我有一个"扩大"按钮,有一个ngIf是要显示的按钮,如果在框中的文本溢出.

问题在于,因为文本在获取时会发生变化,所以"扩展"按钮的条件会true在Angular的变化检测结束后变为...

所以我得到了这个错误:表达式在检查后发生了变化.上一个值:'false'.当前值:'true'.

显然按钮没有显示......

看到这个Plunker(检查控制台以查看错误...)

知道如何使这项工作？

我有纯管道TranslatePipe,使用LocaleService具有locale$: Observable<string>当前区域设置的短语进行翻译.我也ChangeDetectionStrategy.OnPush启用了所有组件,包括AppComponent.现在,当有人更改语言时,如何重新加载整个应用程序？(在locale$observable中发出新值).

目前,我location.reload()在用户在语言之间切换后使用.这很烦人,因为整个页面都重新加载.如何使用纯管道和OnPush检测策略进行这种角度方式？

我正在尝试创建一个简单的示例项目来测试角度2更改检测机制:我在主索引页面上的脚本标记中创建一个纯javascript对象.它包含以下内容:

        var Tryout = {};
        Tryout.text = "Original text here";
        Tryout.printme = function(){
            console.log(Tryout.text);
        }
        Tryout.changeme = function(){
            Tryout.text = "Change was made";
        }

一个用于控制台登录的功能,另一个用于更改文本属性.

现在在Angular 2中,代码如下所示:

import {Component} from "angular2/core"

@Component({
    selector: 'my-app',
    template: `
        <h1>{{TryoutRef.text}}</h1>
        <input type="text" [(ngModel)]="TryoutRef.text">
        <button (click)="consoleLogMe()">Console Log</button>
        <button (click)="changeMe()">Change me inside</button>
    `
})

export class MyApp{

    TryoutRef:any = Tryout;
    constructor(){
    }
    changeMe(){
        this.TryoutRef.changeme();
    }
    consoleLogMe(){
        console.log(this.TryoutRef.text);
    }

}
declare var Tryout:string;

我想要做的是:当我通常使用onclick(完全在角度之外)调用函数Tryout.printme()时,我希望angular检测更改并更新屏幕.

我成功了这一点:当我从组件调用Tryout.printme()时(changeme()函数调用Tryout.printme()),Angular检测到更改并更新UI,这很好.此外,当我从外部角度更改并从Angular调用consoleLogMe()时,它会记录更改的文本并更新UI.

我想我需要在Angular以某种方式运行的同一区域中执行Tryout.changeme().有任何想法吗？我有一个很大的项目,它是在纯javascript/jquery中完成的,现在我慢慢地需要将把手模板重写为angular2组件而不触及模型(尚未).为此,我需要强制模型在与角度相同的区域中执行.

如果我想在Angular 1中执行类似的操作,我只需要$ scope.$ apply它可以工作.

这是示例中的gif:

我使用bootstrap作为我的布局,我需要检查自动计算的带有引导程序的DIV的大小是否已更改,例如width = 25%.

是否有可能对我未在模板中设置的属性进行更改检测,但是由bootstrap设置.(窗口:调整大小)是不够的.

谢谢

我有一个对象数组(让我们称之为arr).在方法的一个组件输入中,(change)我修改了这些对象的属性之一,但在视图(*ngFor)中没有任何变化.我读到Angular2变化检测不检查数组或对象的内容,所以我尝试了这些:

this.arr = this.arr.slice();

和

this.arr = [...this.arr];

但是视图没有改变,它仍然显示旧的属性.在(change)方法中console.log()我得到了正确的数组.奇怪,但是这一个工程:this.arr = []; 我想NgZone和markForCheck()太.

我正在创建一个调用Facebook javascript api的Facebook服务,并且想知道如何在我的值更新时最好地实现更改检测.

我有一个UserService具有currentUser属性,它是一个BehaviorSubject:

currentUser: Subject<User> = new BehaviorSubject<User>(new User(null));

而当我想以响应的JavaScript SDK告诉我,在用户登录或注销Facebook的更新用户,我更新,需要调用tick()上ApplicationRef:

updateUser(user: User) {
  console.log('UserService.updateUser:', user);
  this.currentUser.next(user);
  this.appRef.tick(); // UI does not update without this
}

constructor(facebook: Facebook) {
  this.facebook.facebookEvents.filter(x => x != null 
         && x.eventName == 'auth.authResponseChange')
      .subscribe((event) => {
        this.updateUser(new User(event.data));
      }
}

在我的组件中,我在构造函数中存储来自用户服务的'currentUser'并绑定到value属性:

<h2>Logged into Facebook as {{currentUser.value.name}}</h2>
<p>Is this you? &nbsp; <img src="{{currentUser.value.profilePicUrl}}"></p>

难道我做错了什么？有没有比从外部库触发更改后调用ApplicationRef.tick()更好的方法？

编辑

我尝试使用NgZone并且不起作用,使用不同的事件返回Feed中的帖子作为服务页面通过它们:

constructor(userService: UserService, private ref: ApplicationRef, private zone: NgZone)

...

this.postsSubject.subscribe((post) => …

我有一个数据表组件(angular2-data-table)项目,我们将项目从Angular的传统变化检测更改OnPush为优化的渲染速度.

一旦实施了新的变更检测策略,就会在数据对象发生变异时引用该表而未更新的错误,例如对象的属性更新参考:https://github.com/swimlane/angular2-data-table/issues/ 255.对于诸如股票代码之类的大型数据集合中的单个属性的内联编辑或外部数据更改之类的事情,可以使用强大的用例.

为了解决这个问题,我们添加了一个名为的自定义trackBy属性检查器trackByProp.参考:提交.不幸的是,这个解决方案没有解决问题.

在实时重新加载的演示页面上,您可以看到上面提交运行中引用的演示但不更新表,直到您单击从而触发更改检测.

组件的结构类似于:

Table > Body > Row Group > Row > Cell

所有这些组件都实现了OnPush.我使用的getter/setter方法在行二传手触发网页重新计算像显示在这里.

我们希望继续OnPush对实现此模式的人进行更改检测,但是,作为一个具有多个消费者的开源项目,可以为屏幕上的可见行值争论某种自定义检查功能.

所有这一切,trackBy都没有触发行单元格值的变化检测,实现这一目标的最佳方法是什么？

所以我有一个标题组件,显示用户名或"登录",具体取决于他们是否登录.我还有一个Login组件,它执行登录的所有业务逻辑.它们目前没有父/子关系.

当用户登录时,除非在浏览器中完成整页刷新,否则标题不会刷新或更改.我一直在网上搜索和阅读有关不同方法的大量搜索.ngOnChanges,NgZone,ApplicationRef和ChangeDetectorRef似乎是最受欢迎的.我正在尝试在ChangeDetectorRef中实现此行为,因为这似乎与我的情况最相关.但是,我似乎无法找到如何使用它的实际示例.

我把它编码了,但它似乎没有做任何事情.任何意见,将不胜感激.我甚至接受我采取错误的方法,除了ChangeDetectorRef之外还需要使用另一种解决方案.

LoginComponent

import { Component, OnInit } from '@angular/core';
import { Response } from '@angular/http';
import { Router } from '@angular/router';

import { AuthenticationService } from '../service/authentication.service';

@Component({
    selector: 'login-component',
    templateUrl: './login.component.html'
})

export class LoginComponent implements OnInit {
    constructor(private router: Router, 
                private authenticationService: AuthenticationService) { }

    ngOnInit() {
        // Resets the login service.  
        // This is one of the events that should cause the refresh.
        this.authenticationService.logout();
    }

    login() {
        /*
        Authentication code
        This is the other event …

我有谷歌地图,每秒触发100次以上的变化检测.如何禁用此更改检测.

点击此处查看地图预览

使用鼠标悬停事件时会更糟.

ngDoCheck() {
  console.log('do check', this.i++);
}