programing

각도와 동일한 각도는 무엇입니까?JS $watch?

muds 2023. 2. 25. 22:26
반응형

각도와 동일한 각도는 무엇입니까?JS $watch?

에서는 JS를 사용하여 할 수 .$watch의 function의 $scopeAngular에서 변수 변화(예를 들어 성분 변수)를 관찰하는 것과 동등한 것은 무엇입니까?

앵글 2 서 서 angular angular angular angular angular 、 angular angular angular angular angular angular angular angular angular angular angular 。 $scope.$watch() ★★★★★★★★★★★★★★★★★」$scope.$digest()R.I.P.P.

안타깝게도 개발 가이드의 변경 감지 섹션은 아직 작성되지 않았습니다(아키텍처 개요 페이지 하단에 "기타 항목" 섹션의 자리 표시자가 있습니다).

변경 감지 기능에 대한 이해는 다음과 같습니다.

  • Zone.js "monkey patches the world" -- "Monkey patches the world" API "Monkey patches the world" (각도) 쓸 수 요.setTimeout() 안에 것, 예를 '컴포넌트 안에 있는 것'입니다.$timeout...왜냐면setTimeout() patchedmonkey patched 。
  • Angular는 "변경 감지기" 트리를 구축하고 유지합니다.이러한 변경 검출기(클래스)는 컴포넌트/방향마다1개씩 있습니다(를 주입하면 이 오브젝트에 액세스 할 수 있습니다).이러한 변경 디텍터는 Angular가 구성요소를 생성할 때 생성됩니다.그들은 당신의 모든 바인딩의 상태를 추적하여 부정 확인을 합니다.이것들은 어떤 의미에서는 자동과 유사하다.$watches()은 Angular 1에 대해 됩니다.{{}}템플릿바인딩입니다.
    Angular 1과 달리 변경 감지 그래프는 방향 트리로, 주기를 가질 수 없습니다(아래에서 살펴본 바와 같이 Angular 2의 성능이 훨씬 향상됩니다).
  • 이벤트가 발생하면(Angular 존 내부), 작성한 코드(이벤트핸들러 콜백)가 실행됩니다.공유 응용프로그램 모델/상태 및/또는 구성요소의 보기 상태 등 원하는 모든 데이터를 업데이트할 수 있습니다.
  • 그 후 추가된 후 Zone.js 후크 때문에 Angular의 변경 검출 알고리즘을 실행합니다. 「」( 「」)를 )onPush구성 요소에 대한 변경 감지 전략), 트리의 모든 구성 요소를 한 번 검사합니다(TTL=1)...(개발 모드일 경우 변경 감지가 두 번 실행됩니다(TTL=2).자세한 내용은 ApplicationRef.tick()을 참조하십시오).변경 디텍터 개체를 사용하여 모든 바인딩에 대해 더티 체크를 수행합니다.
    • 라이프 사이클 훅은 변경 검출의 일부로서 호출됩니다.
      속성(String인, 「String, boolean, number」를 실장할 수 .ngOnChanges()변경을 통지합니다.
      유형(오브젝트,등되지 않은 배열에 등 이 항목을 구현해야 ngDoCheck()(자세한 내용은 SO 답변을 참조하십시오).
      단일 트리 워크 구현(즉, 단방향 데이터 흐름) 때문에 하위 구성요소의 속성 및/또는 속성만 변경해야 합니다.여기에 그것을 위반하는 플런커가 있습니다.스테이트풀 파이프도 여기에 걸려들 수 있습니다.
  • 발견된 바인딩 변경에 대해 구성 요소가 업데이트되고 다음으로 DOM이 업데이트됩니다.이것으로 변경 검출이 완료되었습니다.
  • 브라우저는 DOM 의 변경을 인식하고, 화면을 갱신합니다.

기타 참고 자료:

이 동작은 이제 컴포넌트 라이프 사이클의 일부가 되었습니다.

컴포넌트는 OnChanges 인터페이스에 ngOnChanges 메서드를 구현하여 입력 변경에 액세스할 수 있습니다.

예:

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);
  }
}

자동 양방향 바인딩과 더불어 값이 변경되었을 때 함수를 호출하는 경우 양방향 바인딩 바로 가기 구문을 보다 자세한 버전으로 해제할 수 있습니다.

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

의 줄임말이다

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

(예: http://victorsavkin.com/post/119943127151/angular-2-template-syntax) 참조).

다음과 같은 작업을 수행할 수 있습니다.

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

하시면 됩니다.getter function ★★★★★★★★★★★★★★★★★」get accessor앵글 2에서 감시하는 역할을 할 수 있습니다.

데모를 참조해 주세요.

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);
    }
}

모델에 대해 getter 및 setter 함수를 사용하는 또 다른 접근법이 있습니다.

@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;
  }
}

바인딩을 하고 는, 「」를 사용할 수 .[(yourVar)] 이 때 '아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아yourVarChange변수가 변경될 때마다 이벤트를 호출합니다.

영웅의 변화를 추적하기 위해 이런 식으로요

@Output() heroChange = new EventEmitter();

하세요.this.heroChange.emit(this.hero);

[(hero)]을 위해를 해 줄 것입니다.

다음 예시를 참조하십시오.

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

이것은 질문에 직접 답하는 것은 아니지만, 저는 여러 번 angularJs에서 $watch를 사용하는 문제를 해결하기 위해 이 Stack Overflow 질문을 했습니다.저는 현재 답변에서 설명한 방법과는 다른 방법을 사용하게 되었고, 누군가 유용하다고 생각할 때 공유하고 싶습니다.

것을 위해 $watch은요, 사용법입니다.BehaviorSubject(자세한 내용은 이쪽)를 Angular 서비스에 등록하면 변경 내용을 볼 수 있습니다.이것은 A와 유사합니다.$watch 및 합니다.angularJs는 설정 및가 필요합니다.

내 컴포넌트:

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;
    });
  }
}

내가 섬기는 일

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});
  }
}

Stackblitz에 대한 데모입니다.

언급URL : https://stackoverflow.com/questions/34569094/what-is-the-angular-equivalent-to-an-angularjs-watch

반응형

'programing' 카테고리의 다른 글

Angular 2의 $compile과 동등  (0) 2023.02.25
도커 컨테이너에서 mongodb 쉘을 시작하는 방법은 무엇입니까?  (0) 2023.02.25
클래스 기반 컴포넌트에서 React.forwardRef를 사용하는 방법  (0) 2023.02.25
TypeScript에서 문자열 유형 배열 테스트  (0) 2023.02.25
'Access-Control-Allow-Origin' 헤더는 여러 값 '*, *'을 포함하지만 하나만 허용됩니다.  (0) 2023.02.25

'programing'의 다른글

  • 현재글각도와 동일한 각도는 무엇입니까?JS $watch?

관련글

댓글

티스토리툴바