typescript angular2 router - 생성자와 ngOnInit의 차이점




9 Answers

최고의 사례는 서비스를 사용하는 것이라고 생각합니다. 구성 요소가 '활성화 됨'상태가되면 서버에서 데이터를 가져 오려고한다고 가정 해 보겠습니다. 서버에서 가져온 데이터에 대해 몇 가지 추가 작업을 수행하려고합니다. 오류가 발생하여이를 다르게 기록하려고합니다.

생성자에 대해 ngOnInit을 사용하는 것은 매우 쉽습니다. 또한 응용 프로그램에 추가해야하는 콜백 레이어의 수를 제한합니다.

예 :

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


}

내 생성자를 사용하여 _userService를 호출하고 user_list를 채울 수는 있지만 어쩌면 그저 몇 가지 추가 작업을 수행하려고 할 수 있습니다. 모든 것이 upper_case인지 확인하는 것과 같이, 나는 내 데이터가 어떻게 전달되는지 완전히 확신하지 못한다.

따라서 ngOnInit을 훨씬 쉽게 사용할 수 있습니다.

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


}

그것은 훨씬 더 쉽게 볼 수있게 해줍니다. 그래서 다른 곳을 찾아야하는 대신 초기화 할 때 구성 요소 내에서 함수를 호출합니다. 실제로는 앞으로 더 쉽게 읽고 사용할 수있게 해주는 또 다른 도구 일뿐입니다. 또한 생성자 내에서 함수 호출을 넣는 것은 정말 나쁜 습관입니다!

title

Angular는 기본적으로 라이프 사이클 후크 ngOnInit 을 제공합니다.

우리가 이미 constructor 가지고 있다면 ngOnInit 사용해야하는 이유는 무엇입니까?




OK, 우선 ngOnInitAngular 라이프 사이클의 일부이며 constructorES6 JavaScript 클래스의 일부이므로 여기에서 주요 차이점이 시작됩니다! ...

Angular의 라이프 사이클을 보여주는 아래 차트를보십시오.

Angular2 +에서 우리는 DI(Dependency Injection) 를 수행하기 위해 constructor 를 사용하고, Angular 1에서는 String 메소드를 호출하고 어떤 종속성이 주입되었는지 확인하면서 발생했습니다.

위의 다이어그램에서 알 수 있듯이 ngOnInit 은 생성자가 준비되고 ngOnChnages 가 된 후에 발생하며 구성 요소가 준비된 후에 해고됩니다. 모든 초기화 작업은이 단계에서 수행 할 수 있습니다. 간단한 샘플은 서비스를 주입하고 init에서 초기화합니다.

좋아, 나는 또한 샘플 코드를 공유하여 아래 코드에서 ngOnInitconstructor 를 어떻게 사용하는지 살펴 보자.

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



간단하고 간단한 대답은,

Constructor : constructor 는 구성 요소가 생성 될 때 default method 가 실행됩니다 ( deafult로 실행 ). 시간의 constructor(default method) 클래스 an instance 를 만들 때 constructor(default method) 가 호출됩니다. 즉, 구성 요소가 constructed or/and an instance is created constructor(default method) 가 호출되고 내부에 작성된 관련 코드가 호출됩니다. Angular2 에서 기본적으로 그리고 일반적으로 컴포넌트는 향후 사용을 위해 구성 될 때 services 와 같은 것을 주입하는 데 사용됩니다.

OnInit : ngOnInit은 구성 요소가 초기화 될 때 constructor(default method) 다음에 처음 실행되는 구성 요소의 라이프 사이클 후크입니다.

따라서 생성자 메서드가 호출되면 생성자가 먼저 호출되고 나중에 Oninit이 호출됩니다.

boot.ts

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

리소스 : LifeCycle 후크

두 가지의 구현을 보여주는이 작은 데모 를 확인할 수 있습니다.




이를 테스트하기 위해 NativeScript 튜토리얼 에서 차용하여이 코드를 작성했습니다.

user.ts

export class User {
    email: string;
    password: string;
    lastLogin: Date;

    constructor(msg:string) {        
        this.email = "";
        this.password = "";
        this.lastLogin = new Date();
        console.log("*** User class constructor " + msg + " ***");
    }

    Login() {
    }
}

login.component.ts

import {Component} from "@angular/core";
import {User} from "./../../shared/user/user"

@Component({
  selector: "login-component",
  templateUrl: "pages/login/login.html",
  styleUrls: ["pages/login/login-common.css", "pages/login/login.css"]
})
export class LoginComponent {

  user: User = new User("property");  // ONE
  isLoggingIn:boolean;

  constructor() {    
    this.user = new User("constructor");   // TWO
    console.log("*** Login Component Constructor ***");
  }

  ngOnInit() {
    this.user = new User("ngOnInit");   // THREE
    this.user.Login();
    this.isLoggingIn = true;
    console.log("*** Login Component ngOnInit ***");
  }

  submit() {
    alert("You’re using: " + this.user.email + " " + this.user.lastLogin);
  }

  toggleDisplay() {
    this.isLoggingIn = !this.isLoggingIn;
  }

}

콘솔 출력

JS: *** User class constructor property ***  
JS: *** User class constructor constructor ***  
JS: *** Login Component Constructor ***  
JS: *** User class constructor ngOnInit ***  
JS: *** Login Component ngOnInit ***  



위의 답변은 원래 질문의이 측면에 실제로 대답하지 않습니다. 라이프 사이클 후크는 무엇입니까? 이 방법을 생각할 때까지 그 의미가 무엇인지 이해하는 데는 시간이 걸렸습니다.

1) 구성 요소가 사람이라고 가정 해보십시오. 인간은 여러 단계의 삶을 포함하는 삶을 살고 있으며 그 후에 만료됩니다.

2) 우리의 인간 구성 요소는 태어난 아기, 초등 학교, 청년, 중년 성인, 고령자, 죽은 사람, 처형 된 다음과 같은 라이프 사이클 스크립트를 가질 수 있습니다.

3) 자녀를 만드는 기능을 원한다고 가정 해보십시오. 이것을 복잡하게하지 않고 유머러스하게 유지하려면 인간 구성 요소 수명의 청년기에만 함수를 호출해야합니다. 따라서 상위 구성 요소가 청년 단계에있을 때만 활성화되는 구성 요소를 개발합니다. 후크는 그 단계의 삶에 신호를 보내고 구성 요소가 그것에 영향을 미치도록하여 도움을줍니다.

재미있는 것들. 상상력을 실제로 이런 식으로 코딩하게하면 복잡 해지고 재미 있습니다.




각도 2 생성자 : -

  1. 생성자는 구성 요소가 생성 될 때 실행되는 기본 메서드입니다.
  2. 생성자는 타이프 스크립트 (typcript) 기능이며 클래스 인스턴스화에만 사용되며 앵귤러 2와는 아무 관련이 없습니다.
  3. ngOnInit () 전에 첫 번째로 호출 된 생성자입니다.

각도 2 ngOnInit : -

  1. ngOnInit 이벤트는 첫 번째 ngOnChanges 이후에 호출되는 Angular 2 라이프 사이클 이벤트 메서드이고 ngOnInit 메서드는 @Input으로 정의 된 매개 변수에 사용됩니다. 그렇지 않으면 생성자는 정상입니다.

  2. ngOnInit은 생성자 다음에 호출되고 ngOnInit은 첫 번째 ngOnChanges 뒤에 호출됩니다.

  3. ngOnChanges는 입력 또는 출력 Y 인딩 값이 변경 될 때 호출됩니다.

다음 다이어그램은 Angular의 거짓말주기를 설명합니다. 그것으로부터 당신은 각각이 불리는 순서에 대한 아이디어를 얻을 수 있습니다.




생성자 는 JavaScript의 메소드이며 es6에서 클래스의 기능으로 간주됩니다. 클래스가 인스턴스화되면 앵귤러 프레임 워크에서 사용 되든 아니든 즉시 생성자가 실행됩니다 .JavaScript 엔진에서 호출되므로 Angular에 생성자가 없습니다. 그걸 통제해라.

import {Component} from '@angular/core';
@Component({})
class CONSTRUCTORTEST {

//This is called by Javascript not the Angular.
     constructor(){
        console.log("view constructor initialised");
     }
}

"ConstructorTest"클래스는 아래에서 인스턴스화되므로 내부적으로 생성자를 호출합니다 (이 모든 것은 JavaScript (es6) 없음).

new CONSTRUCTORTEST();

Angular가 구성 요소 초기화를 완료하면 Angular.ngOnInit 렌더링에 ngOnInit 라이프 사이클 후크가있는 것입니다.

import {Component} from '@angular/core';
@Component({})
class NGONINITTEST implements onInit{
   constructor(){}
   //ngOnInit calls by Angular
   ngOnInit(){
     console.log("Testing ngOnInit");
   }
}

먼저 아래의 클래스를 인스턴스화하여 생성자 메서드를 즉시 실행합니다.

let instance = new NGONINITTEST();

필요한 경우 ngOnInit은 Angular로 호출됩니다.

instance.ngOnInit();

그러나 왜 우리는 Angular에서 생성자를 사용하고 있는지 물어볼 수 있습니다.

대답은 의존성 주입입니다 . 이전에 언급했듯이 생성자가 클래스가 인스턴스화 될 때 (즉 Angular로 ngOnInit를 호출하기 전에) JavaScript 엔진에 의해 즉시 호출되므로 typescript는 생성자에서 정의 된 종속성 유형을 얻는 데 도움이됩니다. 특정 구성 요소에서 어떤 유형의 종속성을 사용하려고 하는지를 각도로 표시합니다.




생성자 : ES6 클래스 (이 경우 TypeScript)의 생성자 메서드는 Angular 기능이 아닌 클래스 자체의 기능입니다. Angular가 생성자를 호출 할 때 제어권을 벗어났습니다. Angular가 구성 요소 초기화를 마쳤을 때 알려주는 것은 적절하지 않습니다. JavaScript 엔진은 Angular가 아닌 생성자를 직접 호출합니다. 그래서 ngOnInit (및 AngularJS의 $ onInit) 라이프 사이클 후크가 만들어졌습니다. 이를 염두에두고, 생성자를 사용하기에 적합한 시나리오가 있습니다. 종속성 주입을 활용하려는 경우입니다. 기본적으로 종속성을 구성 요소에 "연결"하기위한 것입니다.

생성자는 JavaScript 엔진에 의해 초기화되고 TypeScript는 Angular에게 특정 속성에 대해 매핑해야하는 종속성을 알려줍니다.

ngOnInit 은 순수하게 Angular가 구성 요소 초기화를 완료했다는 신호를 제공합니다.

이 단계에는 @Input () 데코레이터를 사용하는 등 구성 요소 자체에 바인딩 할 수있는 속성에 대한 변경 감지의 첫 번째 단계가 포함됩니다.

이 때문에 @Input () 속성은 ngOnInit에서 사용할 수 있지만, 의도적으로 생성자 내부에서는 정의되지 않습니다.




constructor() 는 의존성 삽입을 수행하는 데 사용됩니다.

ngOnInit() , ngOnChanges()ngOnDestroy() 등은 라이프 사이클 메소드입니다. ngOnChanges() 전에 ngOnInit() 먼저 호출됩니다. 바운드 프로퍼티의 값이 변경되면 변경 사항이 없을 경우 호출되지 않습니다. ngOnDestroy() 는 구성 요소가 제거 될 때 호출됩니다. 이를 사용하려면 OnDestroy 가 클래스에 의해 implement 되어야합니다.




Related