Qual é o equivalente Angular a um relógio AngularJS $?

No AngularJS, você foi capaz de especificar observadores para observar alterações nas variáveis ​​de escopo usando a $watchfunção de $scope. Qual é o equivalente a observar alterações de variáveis ​​(por exemplo, variáveis ​​de componentes) no Angular?

No Angular 2, a detecção de alterações é automática ... $scope.$watch()e o $scope.$digest()RIP

Infelizmente, a seção Detecção de alterações do guia do desenvolvedor ainda não foi gravada (existe um espaço reservado na parte inferior da página Visão geral da arquitetura , na seção "O outro material").

Aqui está meu entendimento de como a detecção de alterações funciona:

• O Zone.js "corrige o mundo" - intercepta todas as APIs assíncronas no navegador (quando o Angular é executado). É por isso que podemos usar setTimeout()dentro de nossos componentes, em vez de algo como $timeout... porque setTimeout()é o patch do macaco.
• Angular cria e mantém uma árvore de "detectores de alterações". Existe um desses detectores de alterações (classe) por componente / diretiva. (Você pode obter acesso a esse objeto injetando ChangeDetectorRef.) Esses detectores de alterações são criados quando o Angular cria componentes. Eles controlam o estado de todas as suas ligações, para verificação suja. Eles são, de certa forma, semelhantes ao automático $watches()que o Angular 1 configuraria para {{}}ligações de modelo.
  Diferentemente do Angular 1, o gráfico de detecção de alterações é uma árvore direcionada e não pode ter ciclos (isso torna o Angular 2 muito mais eficiente, como veremos abaixo).
• Quando um evento é acionado (dentro da zona Angular), o código que escrevemos (o retorno de chamada do manipulador de eventos) é executado. Ele pode atualizar os dados que desejar - o modelo / estado do aplicativo compartilhado e / ou o estado de exibição do componente.
• Depois disso, devido aos ganchos Zone.js adicionados, ele executa o algoritmo de detecção de alterações do Angular. Por padrão (ou seja, se você não estiver usando a onPushestratégia de detecção de alterações em nenhum de seus componentes), todos os componentes da árvore serão examinados uma vez (TTL = 1) ... a partir do topo, em ordem de profundidade. (Bem, se você estiver no modo dev, a detecção de alterações será executada duas vezes (TTL = 2). Consulte ApplicationRef.tick () para obter mais informações sobre isso.) Realiza verificação suja em todas as suas ligações, usando esses objetos detectores de alterações.
  • Os ganchos do ciclo de vida são chamados como parte da detecção de alterações.
    Se os dados do componente que você deseja assistir forem uma propriedade de entrada primitiva (String, boolean, number), você poderá implementar ngOnChanges()para ser notificado sobre alterações.
    Se a propriedade input for um tipo de referência (objeto, matriz, etc.), mas a referência não foi alterada (por exemplo, você adicionou um item a uma matriz existente), será necessário implementar ngDoCheck()(consulte esta resposta do SO para obter mais informações). nisto).
    Você deve alterar apenas as propriedades do componente e / ou propriedades dos componentes descendentes (devido à implementação de uma caminhada em árvore única - ou seja, fluxo de dados unidirecional). Aqui está um desentupidor que viola isso. Tubos com estado também podem levá-lo até aqui.
• Para quaisquer alterações de ligação encontradas, os componentes são atualizados e o DOM é atualizado. A detecção de alterações agora está concluída.
• O navegador percebe que o DOM altera e atualiza a tela.

Outras referências para saber mais:

• O resumo $ da Angular renasce na versão mais recente do Angular - explica como as idéias do AngularJS são mapeadas para o Angular
• Tudo o que você precisa saber sobre a detecção de alterações no Angular - explica detalhadamente como a detecção de alterações funciona sob o capô
• Detecção de alterações explicada - Thoughtram blog 22 de fevereiro de 2016 - provavelmente a melhor referência existente
• Vídeo de Savkin's Change Detection Reinvented - definitivamente assista a este
• Como a Detecção de mudança angular 2 realmente funciona? - blog de jhade 24 de fevereiro de 2016
• O vídeo de Brian e o de Miško sobre o Zone.js. Brian's é sobre Zone.js. Miško's é sobre como o Angular 2 usa o Zone.js para implementar a detecção de alterações. Ele também fala sobre detecção de alterações em geral, e um pouco sobre onPush.
• Posts no blog de Victor Savkins: Detecção de alterações no Angular 2 , duas fases das aplicações do Angular 2 , Angular, Imutabilidade e Encapsulamento . Ele cobre muito terreno rapidamente, mas às vezes pode ser conciso, e você fica coçando a cabeça, pensando nas peças que faltam.
• Detecção ultra-rápida de alterações (Google doc) - muito técnica, muito concisa, mas descreve / esboça as classes ChangeDetection que são criadas como parte da árvore

Esse comportamento agora faz parte do ciclo de vida do componente.

Um componente pode implementar o método ngOnChanges na interface OnChanges para obter acesso às alterações de entrada.

Exemplo:

import {Component, Input, OnChanges} from 'angular2/core';


@Component({
  selector: 'hero-comp',
  templateUrl: 'app/components/hero-comp/hero-comp.html',
  styleUrls: ['app/components/hero-comp/hero-comp.css'],
  providers: [],
  directives: [],

  pipes: [],
  inputs:['hero', 'real']
})
export class HeroComp implements OnChanges{
  @Input() hero:Hero;
  @Input() real:string;
  constructor() {
  }
  ngOnChanges(changes) {
      console.log(changes);
  }
}

Se, além da ligação bidirecional automática, você desejar chamar uma função quando um valor for alterado, poderá interromper a sintaxe do atalho de ligação bidirecional para a versão mais detalhada.

<input [(ngModel)]="yourVar"></input>

é uma abreviação de

<input [ngModel]="yourVar" (ngModelChange)="yourVar=$event"></input>

(veja, por exemplo, http://victorsavkin.com/post/119943127151/angular-2-template-syntax )

Você poderia fazer algo assim:

<input [(ngModel)]="yourVar" (ngModelChange)="changedExtraHandler($event)"></input>

Você pode usar getter functionou get accessoratuar como relógio no angular 2.

Veja a demonstração aqui .

import {Component} from 'angular2/core';

@Component({
  // Declare the tag name in index.html to where the component attaches
  selector: 'hello-world',

  // Location of the template for this component
  template: `
  <button (click)="OnPushArray1()">Push 1</button>
  <div>
    I'm array 1 {{ array1 | json }}
  </div>
  <button (click)="OnPushArray2()">Push 2</button>
  <div>
    I'm array 2 {{ array2 | json }}
  </div>
  I'm concatenated {{ concatenatedArray | json }}
  <div>
    I'm length of two arrays {{ arrayLength | json }}
  </div>`
})
export class HelloWorld {
    array1: any[] = [];
    array2: any[] = [];

    get concatenatedArray(): any[] {
      return this.array1.concat(this.array2);
    }

    get arrayLength(): number {
      return this.concatenatedArray.length;
    }

    OnPushArray1() {
        this.array1.push(this.array1.length);
    }

    OnPushArray2() {
        this.array2.push(this.array2.length);
    }
}

Aqui está outra abordagem usando as funções getter e setter para o modelo.

@Component({
  selector: 'input-language',
  template: `
  …
  <input 
    type="text" 
    placeholder="Language" 
    [(ngModel)]="query" 
  />
  `,
})
export class InputLanguageComponent {

  set query(value) {
    this._query = value;
    console.log('query set to :', value)
  }

  get query() {
    return this._query;
  }
}

Se você deseja torná-lo vinculativo de duas vias, pode usar [(yourVar)], mas é necessário implementar o yourVarChangeevento e chamá-lo sempre que sua variável for alterada.

Algo assim para acompanhar a mudança do herói

@Output() heroChange = new EventEmitter();

e quando seu herói mudar, ligue this.heroChange.emit(this.hero);

a [(hero)]ligação fará o resto por você

veja o exemplo aqui:

http://plnkr.co/edit/efOGIJ0POh1XQeRZctSx?p=preview

Tente isto quando seu aplicativo ainda exige $parse, $eval, $watchcomo o comportamento em Angular

https://github.com/vinayk406/angular-expression-parser

Isso não responde diretamente à pergunta, mas em várias ocasiões cheguei a essa questão do Stack Overflow para resolver algo que eu usaria $ watch nos angularJs. Acabei usando outra abordagem além da descrita nas respostas atuais e quero compartilhá-la caso alguém ache útil.

A técnica que eu uso para obter algo semelhante $watché usar um BehaviorSubject( mais sobre o tópico aqui ) em um serviço Angular e permitir que meus componentes se inscrevam nele para obter (observar) as alterações. Isso é semelhante ao a $watchem angularJs, mas requer um pouco mais de configuração e entendimento.

No meu componente:

export class HelloComponent {
  name: string;
  // inject our service, which holds the object we want to watch.
  constructor(private helloService: HelloService){
    // Here I am "watching" for changes by subscribing
    this.helloService.getGreeting().subscribe( greeting => {
      this.name = greeting.value;
    });
  }
}

No meu serviço

export class HelloService {
  private helloSubject = new BehaviorSubject<{value: string}>({value: 'hello'});
  constructor(){}
  // similar to using $watch, in order to get updates of our object 
  getGreeting(): Observable<{value:string}> {
    return this.helloSubject;
  }
  // Each time this method is called, each subscriber will receive the updated greeting.
  setGreeting(greeting: string) {
    this.helloSubject.next({value: greeting});
  }
}

Aqui está uma demonstração no Stackblitz