[angular] 생성자와 ngOnInit의 차이점

기사 Angular에서 Constructor와 ngOnInit의 근본적인 차이점은 여러 관점과의 차이점을 탐구합니다. 이 답변은 구성 요소 초기화 프로세스와 관련된 가장 중요한 차이점 설명을 제공하며 사용법도 다릅니다.

각도 부트 스트랩 프로세스는 두 가지 주요 단계로 구성됩니다.

• 구성 요소 트리 구성
• 변화 감지 실행

Angular가 컴포넌트 트리를 생성 할 때 컴포넌트의 생성자가 호출됩니다. 모든 수명주기 후크는 실행중인 변경 감지의 일부로 호출됩니다.

Angular가 컴포넌트 트리를 구성 할 때 루트 모듈 인젝터가 이미 구성되어 있으므로 모든 글로벌 종속성을 주입 할 수 있습니다. 또한 Angular가 자식 구성 요소 클래스를 인스턴스화 할 때 부모 구성 요소 인젝터도 이미 설정되어 있으므로 부모 구성 요소 자체를 포함하여 부모 구성 요소에 정의 된 공급자를 주입 할 수 있습니다. 구성 요소 생성자는 인젝터 컨텍스트에서 호출되는 유일한 방법이므로 종속성을 얻는 유일한 장소 인 종속성이 필요한 경우.

Angular가 변경 감지를 시작하면 컴포넌트 트리가 구성되고 트리의 모든 컴포넌트에 대한 생성자가 호출되었습니다. 또한 모든 구성 요소의 템플릿 노드가 DOM에 추가됩니다. @Input생성자에서 사용할 수있는 특성을 가지고 기대할 수 있도록 통신 메커니즘은 변화 검출시 처리됩니다. 이후에 사용할 수 있습니다 ngOnInit.

간단한 예를 보자. 다음 템플릿이 있다고 가정하십시오.

<my-app>
   <child-comp [i]='prop'>

따라서 Angular는 응용 프로그램을 부트 스트랩하기 시작합니다. 내가 말했듯이 먼저 각 구성 요소에 대한 클래스를 만듭니다. 그래서 MyAppComponent생성자를 호출합니다 . 또한 my-app구성 요소의 호스트 요소 인 DOM 노드를 작성합니다 . 그런 다음 child-comp호출 ChildComponent생성자에 대한 호스트 요소를 작성합니다 . 이 단계에서는 실제로 i입력 바인딩 및 수명주기 후크와 관련이 없습니다 . 따라서이 프로세스가 끝나면 Angular는 다음과 같은 컴포넌트 뷰 트리로 끝납니다.

MyAppView
  - MyApp component instance
  - my-app host element data
       ChildCompnentView
         - ChildComponent component instance
         - child-comp host element data  

그런 다음에 만 변경 감지를 실행 하고 MyAppComponent 클래스 에서 my-app및 호출 ngOnInit에 대한 바인딩을 업데이트합니다 . 그런 다음 ChildComponent 클래스 의 child-comp및 호출 ngOnInit에 대한 바인딩을 업데이트합니다 .

생성자 또는 ngOnInit사용 가능한 항목에 따라 초기화 논리를 수행 할 수 있습니다. 예를 들어 다음은 @ViewChild 쿼리를 평가하기 전에 ViewContainerRef를 얻는 방법 입니다. 생성자에서 어떤 유형의 초기화 논리를 수행해야하는지 보여줍니다.

다음은 주제를 더 잘 이해하는 데 도움이되는 기사입니다.

• Angular에서 변경 감지에 대해 알아야 할 모든 것
• Angular의 $ digest는 새로운 버전의 Angular에서 다시 태어났습니다.
• 속성 바인딩의 메커니즘이 Angular에서 업데이트됩니다.

답변

export class Users implements OnInit{

    user_list: Array<any>;

    constructor(private _userService: UserService){
    };

    ngOnInit(){
        this.getUsers();
    };

    getUsers(){
        this._userService.getUsersFromService().subscribe(users =>  this.user_list = users);
    };


}

export class Users implements OnInit{

    user_list: Array<any>;

    constructor(private _userService: UserService){
    };

    ngOnInit(){
        this.getUsers();
    };

    getUsers(){
        this._userService.getUsersFromService().subscribe(users =>  this.user_list = users);
        this.user_list.toUpperCase();
    };


}

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


@Component({
 selector: 'my-app',
 template: `<h1>App is running!</h1>
  <my-app-main [data]=data></<my-app-main>`,
  styles: ['h1 { font-weight: normal; }']
})
class ExampleComponent implements OnInit {
  constructor(private router: Router) {} //Dependency injection in the constructor

  // ngOnInit, get called after Component initialised! 
  ngOnInit() {
    console.log('Component initialised!');
  }
}

export class App implements OnInit, AfterViewInit, AfterContentInit {
  @Input() myInput: string;
  @ViewChild() myTemplate: TemplateRef<any>;
  @ContentChild(ChildComponent) myComponent: ChildComponent;

  constructor(private elementRef: ElementRef) {
     // this.elementRef.nativeElement is undefined here
     // this.myInput is undefined here
     // this.myTemplate is undefined here
     // this.myComponent is undefine here
  }

  ngOnInit() {
     // this.elementRef.nativeElement can be used from here on
     // value of this.myInput is passed from parent scope
     // this.myTemplate and this.myComponent are still undefined
  }
  ngAfterContentInit() {
     // this.myComponent now gets projected in and can be accessed
     // this.myTemplate is still undefined
  }

  ngAfterViewInit() {
     // this.myTemplate can be used now as well
  }
}

import {Cmomponent, OnInit} from 'angular2/core';
import {ExternalService} from '../externalService';

export class app implements OnInit{
   constructor(myService:ExternalService)
   {
           this.myService=myService;
   }

   ngOnInit(){
     // this.myService.someMethod() 
   }
}