생성자와 ngOnInit의 차이점

질문자 :Haseena P A

Angular는 기본적으로 수명 주기 후크 ngOnInit

constructor 가 있는 경우 ngOnInit 사용해야 하는 이유는 무엇입니까?

Constructor 는 클래스가 인스턴스화될 때 실행되는 클래스의 기본 메서드이며 클래스 및 해당 하위 클래스에서 필드의 적절한 초기화를 보장합니다. Angular 또는 더 나은 DI(Dependency Injector)는 생성자 매개변수를 분석하고 new MyClass() 를 호출하여 새 인스턴스를 생성할 때 생성자 매개변수의 유형과 일치하는 공급자를 찾고 해결하고 다음과 같이 생성자에 전달합니다.

 new MyClass(someArg);

ngOnInit 는 Angular가 구성 요소 생성을 완료했음을 나타내기 위해 Angular에서 호출하는 수명 주기 후크입니다.

사용하려면 다음과 같이 OnInit 를 가져와야 OnInit 구현하는 것은 필수는 아니지만 모범 사례로 간주됨).

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

OnInit 메서드를 사용하려면 다음과 같이 클래스를 구현해야 합니다.

 export class App implements OnInit { constructor() { // Called first time before the ngOnInit() } ngOnInit() { // Called after the constructor and called after the first ngOnChanges() } }

지시문의 데이터 바인딩 속성이 초기화된 후 사용자 정의 초기화 논리를 실행하려면 이 인터페이스를 구현하세요. ngOnInit는 디렉티브의 데이터 바인딩된 속성이 처음으로 확인된 직후와 자식이 확인되기 직전에 호출됩니다. 지시문이 인스턴스화될 때 한 번만 호출됩니다.

대부분 우리 ngOnInit 를 사용하고 생성자에서 작업하는 것을 피합니다. 생성자는 클래스 멤버를 초기화하는 데만 사용해야 하지만 실제 "작업"을 수행해서는 안 됩니다.

따라서 의존성 주입을 설정하기 constructor() ngOnInit()는 "시작"하기에 더 좋은 위치입니다. 구성 요소의 바인딩이 해결되는 위치/시점입니다.

자세한 내용은 여기를 참조하십시오.

• https://angular.io/api/core/OnInit

• 각도 구성 요소 생성자 대 OnInit

Pardeep Jain

Angular에서 Constructor와 ngOnInit의 근본적인 차이점 기사에서는 다양한 관점에서 차이점을 살펴봅니다. 이 답변은 사용법의 차이도 보여주는 구성 요소 초기화 프로세스와 관련된 가장 중요한 차이점 설명을 제공합니다.

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

• 구성 요소 트리 구성
• 실행 중인 변경 감지

구성 요소의 생성자는 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

만 다음에 대한 변경 감지 및 업데이트 바인딩을 실행하는 my-app 및 호출 ngOnInit MyAppComponent 클래스. 그런 다음에 대한 바인딩을 갱신으로 진행 child-comp 와 통화 ngOnInit ChildComponent 클래스에.

ngOnInit 에 따라 생성자 또는 ngOnInit에서 초기화 논리를 수행할 수 있습니다. 예를 들어 @ViewChild 쿼리가 평가되기 전에 ViewContainerRef를 얻는 방법은 다음과 같습니다 . 기사는 생성자에서 수행해야 하는 초기화 논리 유형을 보여줍니다.

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

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

Max Koretskyi

서비스를 사용하는 것이 가장 좋은 예라고 생각합니다. 구성 요소가 '활성화'될 때 서버에서 데이터를 가져오고 싶다고 가정해 보겠습니다. 서버에서 데이터를 가져온 후 데이터에 몇 가지 추가 작업을 수행하고 싶다고 가정해 보겠습니다. 아마도 오류가 발생하여 다르게 기록하고 싶을 것입니다.

생성자를 통해 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를 채울 수 있지만 어쩌면 추가 작업을 수행하고 싶을 수도 있습니다. 모든 것이 대문자인지 확인하는 것처럼 내 데이터가 어떻게 전달되는지 완전히 확신할 수 없습니다.

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

보기가 훨씬 쉬워지므로 초기화할 때 다른 곳에서 찾을 필요 없이 구성 요소 내에서 함수를 호출하기만 하면 됩니다. 실제로 이것은 나중에 읽고 사용하기 쉽게 만드는 데 사용할 수 있는 또 다른 도구일 뿐입니다. 또한 생성자 내에서 함수 호출을 넣는 것은 정말 나쁜 습관입니다!

Morgan G

OK, 우선 ngOnInit 동안, 각도 라이프 사이클의 일부입니다 constructor 의 주요 차이는 바로 여기에서 시작하므로, ES6 자바 스크립트 클래스의 일부입니다! ...

Angular의 수명 주기를 보여주는 아래 차트를 보십시오.

Angular2+에서는 constructor 를 DI(Dependency Injection) 를 수행하지만 Angular 1에서는 String 메서드를 호출하고 어떤 종속성이 주입되었는지 확인하여 발생했습니다.

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

자, 여러분이 볼 수 있는 샘플 코드도 공유합니다. 아래 코드에서 ngOnInit 및 constructor

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

Alireza

난 그냥 위의 설명에서 생략하고 사용해야하는 경우에 대해 설명했다 하나 개 중요한 것은 추가합니다 ngOnInit .

ViewChildren , ContentChildren 또는 ElementRef 를 통해 구성 요소의 DOM을 조작하는 경우 생성자 단계에서 기본 요소를 사용할 수 없습니다.

그러나 구성 요소가 생성되고 검사( ngOnChanges ngOnInit 가 발생하므로 이 시점에서 DOM에 액세스할 수 있습니다.

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

Miroslav Jonas

첫 번째(생성자)는 클래스 인스턴스화와 관련이 있으며 Angular2와 아무 관련이 없습니다. 생성자는 모든 클래스에서 사용할 수 있습니다. 새로 생성된 인스턴스에 대한 일부 초기화 처리를 넣을 수 있습니다.

두 번째 것은 Angular2 구성 요소의 수명 주기 후크에 해당합니다.

공식 Angular의 웹사이트에서 인용:

• ngOnChanges 는 입력 또는 출력 바인딩 값이 변경될 때 호출됩니다.
• ngOnInit 는 첫 번째 ngOnChanges

당신이 사용해야 그래서 ngOnInit 초기화 처리 (정의 예를 들어, 구성 요소 매개 변수에 대한 구성 요소의 바인딩에 의존하는 경우 @Input ) 그렇지 않으면 생성자는 충분하다 ...

Thierry Templier

짧고 간단한 대답은,

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

리소스: 수명 주기 후크

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

micronyks

ngOnInit 의 주요 차이점은 ngOnInit 가 수명 주기 후크 이며 생성자 이후에 실행된다는 것입니다. 구성 요소 보간 템플릿 및 입력 초기 값은 생성자에서 사용할 수 없지만 ngOnInit 에서는 사용할 수 있습니다.

실질적인 차이점은 ngOnInit 가 코드 구조에 영향을 미치는 방식입니다. 대부분의 초기화 코드는 경쟁 조건을 생성하지 않는 한 ngOnInit 로 이동할 수 있습니다.

생성자 안티패턴

상당한 양의 초기화 코드는 생성자 메서드를 확장, 읽기 및 테스트하기 어렵게 만듭니다.

초기화 로직을 클래스 생성자와 분리하는 일반적인 방법은 초기화 로직을 init 와 같은 다른 메소드로 옮기는 것입니다.

 class Some { constructor() { this.init(); } init() {...} }

ngOnInit 는 구성 요소 및 지시문에서 이 목적을 수행할 수 있습니다.

 constructor( public foo: Foo, /* verbose list of dependencies */ ) { // time-sensitive initialization code this.bar = foo.getBar(); } ngOnInit() { // rest of initialization code }

의존성 주입

Angular에서 클래스 생성자의 주요 역할은 종속성 주입입니다. 생성자는 TypeScript의 DI 주석에도 사용됩니다. 거의 모든 종속성은 클래스 인스턴스에 속성으로 할당됩니다.

평균 구성 요소/지시어 생성자는 종속성으로 인해 여러 줄 서명을 가질 수 있기 때문에 이미 충분히 큽니다. 생성자 본문에 불필요한 초기화 논리를 넣어 안티패턴에 기여합니다.

비동기 초기화

비동기식 초기화 생성자는 비동기식 루틴보다 먼저 클래스 인스턴스화가 완료되고 경쟁 조건이 생성될 수 있기 때문에 종종 반패턴으로 간주되고 냄새가 날 수 있습니다. 그렇지 않은 경우 ngOnInit 및 기타 수명 주기 후크가 이에 더 적합합니다. 특히 async 구문의 이점을 누릴 수 있기 때문입니다.

 constructor( public foo: Foo, public errorHandler: ErrorHandler ) {} async ngOnInit() { try { await this.foo.getBar(); await this.foo.getBazThatDependsOnBar(); } catch (err) { this.errorHandler.handleError(err); } }

경쟁 조건(초기화 오류 시 구성 요소가 나타나지 않아야 하는 조건 포함)이 있는 경우 구성 요소 인스턴스화 전에 비동기 초기화 루틴이 발생하고 상위 구성 요소, 라우터 가드 등으로 이동해야 합니다.

단위 테스트

ngOnInit 는 생성자보다 유연하며 이 답변 에서 자세히 설명하는 단위 테스트에 대한 몇 가지 이점을 제공합니다.

ngOnInit 가 단위 테스트의 구성 요소 컴파일에서 자동으로 호출되지 않는다는 점을 고려하면 ngOnInit 는 구성 요소 인스턴스화 후에 스파이되거나 모의될 수 있습니다.

예외적인 경우 ngOnInit 는 완전히 스텁되어 다른 구성 요소 단위(예: 일부 템플릿 논리)에 대한 격리를 제공할 수 있습니다.

계승

자식 클래스는 생성자를 대체할 수 없고 확장만 할 수 있습니다.

this super() 전에 참조할 수 없기 때문에 초기화 우선 순위에 제한이 있습니다.

Angular 구성 요소 또는 지시문이 시간에 민감하지 않은 초기화 논리에 ngOnInit 를 사용한다는 점을 고려하면 super.ngOnInit() 호출 여부와 다음 경우를 선택할 수 있습니다.

 ngOnInit() { this.someMethod(); super.ngOnInit(); }

이것은 생성자만으로 구현하는 것은 불가능합니다.

Estus Flask

다른 많은 언어와 마찬가지로 클래스 수준, 생성자 또는 메서드에서 변수를 초기화할 수 있습니다. 특정 경우에 가장 적합한 것이 무엇인지 결정하는 것은 개발자의 몫입니다. 그러나 다음은 결정에 관한 모범 사례 목록입니다.

클래스 수준 변수

일반적으로 나머지 구성 요소에서 사용할 모든 변수를 여기에서 선언합니다. 값이 다른 것에 의존하지 않는 경우 초기화하거나 변경되지 않을 경우 const 키워드를 사용하여 상수를 생성할 수 있습니다.

 export class TestClass{ let varA: string = "hello"; }

건설자

일반적으로 생성자에서 아무 작업도 수행하지 않고 주입될 클래스에만 사용하는 것이 가장 좋습니다. 대부분의 경우 생성자는 다음과 같아야 합니다.

 constructor(private http: Http, private customService: CustomService) {}

이렇게 하면 클래스 수준 변수가 자동으로 생성되므로 수동으로 수행할 필요 없이 customService.myMethod()

NgOnInit

NgOnit은 Angular 2 프레임워크에서 제공하는 수명 주기 후크입니다. 구성 요소를 사용하려면 OnInit 이 수명 주기 후크는 생성자가 호출되고 모든 변수가 초기화된 후에 호출됩니다. 대부분의 초기화는 여기로 이동해야 합니다. Angular가 구성 요소를 올바르게 초기화하고 구성 요소가 제대로 로드되지 않았을 때 작업을 수행하는 대신 OnInit 에서 필요한 모든 논리를 시작할 수 있다는 확신을 갖게 됩니다.

다음은 호출되는 순서를 자세히 설명하는 이미지입니다.

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

TLDR

Angular 2 프레임워크를 사용 중이고 특정 수명 주기 이벤트와 상호 작용해야 하는 경우 프레임워크에서 제공하는 메서드를 사용하여 문제를 방지하세요.

Eduardo Dennis

이를 테스트하기 위해 NativeScript Tutorial 에서 다음과 같이 코드를 작성했습니다.

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

로그인.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 ***

jmbmage

위의 답변은 원래 질문의 이 측면에 실제로 답변하지 않습니다. 수명 주기 후크란 무엇입니까? 이런 식으로 생각할 때까지 그것이 무엇을 의미하는지 이해하는 데 시간이 걸렸습니다.

1) 구성 요소가 사람이라고 가정합니다. 인간은 삶의 여러 단계를 포함하는 삶을 가지고 있으며, 그 후에 우리는 만료됩니다.

2) 인간 구성 요소는 다음과 같은 수명 주기 스크립트를 가질 수 있습니다. 출생, 아기, 초등학교, 청년, 중년 성인, 노인, 사망, 폐기.

3) 자식을 만드는 기능을 갖고 싶다고 가정해 봅시다. 이것이 복잡해지고 오히려 유머러스해지지 않도록 하기 위해 함수가 인간 구성 요소 생명의 Young Adult 단계에서만 호출되기를 원합니다. 따라서 부모 구성 요소가 Young Adult 단계에 있을 때만 활성화되는 구성 요소를 개발합니다. 후크는 생명의 해당 단계에 신호를 보내고 구성 요소가 작동하도록 하여 이를 수행하는 데 도움이 됩니다.

재미있는 것들. 당신의 상상을 실제로 이와 같은 코딩에 적용한다면 그것은 복잡하고 재미있어집니다.

Preston

생성자 는 JavaScript의 메소드이며 es6의 클래스 기능으로 간주됩니다. 클래스가 인스턴스화되면 Angular 프레임워크에서 사용되는지 여부에 관계없이 생성자가 즉시 실행됩니다. 따라서 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" 클래스는 아래에 인스턴스화되어 있으므로 내부적으로 생성자를 호출합니다(이 모든 것은 Angular가 아닌 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에서 생성자를 사용하는 이유를 물어볼 수 있습니다.

대답은 종속성 주입입니다 . 앞에서 언급했듯이 생성자는 클래스가 인스턴스화될 때 즉시 JavaScript 엔진에 의해 호출됩니다(Angular에 의해 ngOnInit를 호출하기 전에). Angular 해당 특정 구성 요소에서 사용하려는 종속성 유형.

Negin

생성자() 는 구성 요소 수명 주기의 기본 메서드이며 종속성 주입에 사용됩니다. 생성자는 Typescript 기능입니다.

ngOnInit() 는 생성자 이후에 호출되고 ngOnInit는 첫 번째 ngOnChanges 이후에 호출됩니다.

즉:

생성자() --> ngOnChanges() --> ngOnInit()

위에서 언급했듯이 ngOnChanges() 는 입력 또는 출력 바인딩 값이 변경될 때 호출됩니다.

Shajin Chandran

여기에서 관찰해야 할 두 가지 사항:

1. 생성자는 해당 클래스의 객체가 생성될 때마다 호출됩니다.
2. 구성 요소가 생성되면 ngOnInit가 호출됩니다.

둘 다 사용성이 다릅니다.

UniCoder

생성자: ES6 클래스(이 경우 TypeScript)의 생성자 메서드는 Angular 기능이 아니라 클래스 자체의 기능입니다. 생성자가 호출되면 Angular가 제어할 수 없습니다. 즉, Angular가 구성 요소 초기화를 완료했을 때 알려주는 적절한 후크가 아닙니다. JavaScript 엔진은 Angular가 아닌 생성자를 직접 호출합니다. 이것이 ngOnInit(AngularJS의 $onInit) 수명 주기 후크가 생성된 이유입니다. 이를 염두에 두고 생성자를 사용하는 데 적합한 시나리오가 있습니다. 이것은 본질적으로 구성 요소에 종속성을 "연결"하기 위해 종속성 주입을 활용하려는 경우입니다.

생성자가 JavaScript 엔진에 의해 초기화되고 TypeScript를 사용하면 특정 속성에 매핑해야 하는 종속성을 Angular에 알릴 수 있습니다.

ngOnInit 는 순전히 Angular가 구성 요소 초기화를 완료했다는 신호를 주기 위한 것입니다.

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

이로 인해 @Input() 속성은 ngOnInit 내에서 사용할 수 있지만 설계상 생성자 내에서 정의되지 않습니다.

JS dev

두 방법 모두 목표/책임이 다릅니다. 생성자의 작업(언어 지원 기능)은 표현 불변성을 유지하는지 확인하는 것입니다. 그렇지 않으면 구성원에게 올바른 값을 제공하여 인스턴스가 유효한지 확인합니다. '올바른'이 무엇을 의미하는지 결정하는 것은 개발자의 몫입니다.

onInit() 메서드(각도 개념)의 작업은 올바른 객체(표현 불변)에 대한 메서드 호출을 허용하는 것입니다. 각 메서드는 메서드가 종료될 때 표현 불변이 유지되는지 확인해야 합니다.

생성자는 '올바른' 객체를 생성하는 데 사용해야 하며, onInit 메서드는 잘 정의된 인스턴스에서 메서드 호출을 호출할 수 있는 기회를 제공합니다.

Bruno Ranschaert

생성자는 클래스가 인스턴스화될 때 실행됩니다. 앵글과는 상관이 없습니다. Javascript의 기능이며 Angular는 이를 제어할 수 없습니다.

ngOnInit는 Angular에 따라 다르며 Angular가 모든 입력 속성으로 구성 요소를 초기화할 때 호출됩니다.

@Input 속성은 ngOnInit 수명 주기 후크에서 사용할 수 있습니다. 이렇게 하면 백엔드 서버에서 데이터를 가져오는 등의 초기화 작업을 수행하여 뷰에 표시할 수 있습니다.

@Input 속성은 생성자 내에서 정의되지 않은 것으로 표시됩니다.

dasunse

생성자는 가장 먼저 실행되며 @input 데이터가 null일 때 가끔 발생합니다! 그래서 우리는 생성자를 사용하여 서비스를 주입하고 ngOnInit가 그 후에 발생합니다. 생성자의 예:

 constructor(translate: TranslateService, private oauthService: OAuthService) { translate.setDefaultLang('En'); translate.use('En');}

ngOnInit의 예:

 ngOnInit() { this.items = [ { label: 'A', icon: 'fa fa-home', routerLink: ['/'] }, { label: 'B', icon: 'fa fa-home', routerLink: ['/'] }] }

ngOnInit는 winForm의 InitialComponents()와 같다고 생각합니다.

user1012506

Angular 라이프 사이클에서

1) Angular 인젝터는 생성자 매개변수를 감지하고 클래스를 인스턴스화합니다.

2) 다음 각도 호출 수명 주기

각도 수명 주기 후크

ngOnChanges --> 지시문 매개변수 바인딩을 호출합니다.

ngOnInit --> 각도 렌더링 시작...

각 수명 주기의 상태로 다른 메서드를 호출합니다.

Moslem Shahsavan

constructor 는 Angular가 구성 요소를 "인스턴싱/구성"할 때 호출됩니다. ngOnInit 메서드는 구성 요소 수명 주기의 초기화 부분을 나타내는 후크입니다. 좋은 방법은 서비스 주입 에만 사용하는 것입니다.

 constructor(private service1: Service1, service2: Service2 ){};

가능하더라도 내부에서 어떤 "일"을 해서는 안됩니다. 구성 요소 "초기화"에서 발생해야 하는 일부 작업을 시작하려면 ngOnInit 사용합니다.

 ngOnInit(){ service1.someWork(); };

또한 상위 구성 요소에서 오는 입력 속성 과 관련된 작업은 생성자에서 수행할 수 없습니다. ngOnInit 메소드 또는 다른 후크에 배치해야 합니다. view와 관련된 요소(DOM)에 대해서도 동일합니다. 예를 들어 viewchild 요소는 다음과 같습니다.

 @Input itemFromParent: string; @ViewChild('childView') childView; constructor(){ console.log(itemFromParent); // KO // childView is undefined here }; ngOnInit(){ console.log(itemFromParent); // OK // childView is undefined here, you can manipulate here };

veben

생성자 는 컴포넌트(또는 다른 클래스)가 빌드될 때 실행되는 함수입니다.

ngOnInit 는 구성 요소 수명 주기 메서드 그룹에 속하는 함수이며 구성 요소의 다른 순간에 실행됩니다(그래서 이름이 수명 주기임). 다음은 모든 목록입니다.

생성자는 수명 주기 함수보다 먼저 실행됩니다.

Przemek Struciński

건설자

생성자 함수는 모든 클래스와 함께 제공되며 생성자는 Angular에만 국한되지 않고 객체 지향 설계에서 파생된 개념입니다. 생성자는 구성 요소 클래스의 인스턴스를 만듭니다.

초기화

ngOnInit 함수는 Angular 구성 요소의 수명 주기 메서드 중 하나입니다. Angular 구성 요소의 수명 주기 메서드(또는 후크)를 사용하면 구성 요소 수명의 여러 단계에서 코드 조각을 실행할 수 있습니다. 생성자 메서드와 달리 ngOnInit 메서드는 이 메서드를 사용하기 위해 구성 요소가 구현해야 하는 Angular 인터페이스( OnInit ngOnInit 메서드는 구성 요소가 생성된 직후에 호출됩니다.

DeC

Constructor 는 ES6의 일부이며 typescript는 es6 구문을 사용하고 있으며 이제는 es7도 사용하므로 typescript가 es5/es4(정의한 대로)로 컴파일되어 이전 브라우저에 대한 지원을 제공하는 고급 기능을 활용할 수 있습니다.

ngOnInIt 은 Angular의 수명 주기 후크입니다. 구성 요소가 초기화될 때 초기화됩니다. (새 생명이 태어난 상태라고 생각하세요)

그것은 사용하기 현명 ngOnInIt 당신이 같은 다른 라이프 사이클 훅이 있기 때문에, 생성자에 비교 ngOnDestory (모든 생명의 죽음으로 고려). 여기에서 메모리 누수를 방지하는 데 좋은 관찰 가능한 항목을 구독 취소할 수 있습니다.

질문이 있는 경우 이 답변에 대해 자유롭게 의견을 말하십시오.

nirmal

constructor() 는 종속성 주입을 수행하는 데 사용됩니다.

ngOnInit() , ngOnChanges() 및 ngOnDestroy() 등은 수명 주기 메서드입니다. ngOnChanges() 는 ngOnInit() 이전에 ngOnInit() 먼저 호출되며 바인딩된 속성의 값이 변경되면 변경 사항이 없으면 호출되지 않습니다. ngOnDestroy() 는 구성 요소가 제거될 때 호출됩니다. 이를 사용하려면 클래스 OnDestroy implement 해야 합니다.

xameeramir

답을 찾았고 영어로 번역하려고 했습니다. 이 질문은 기술 인터뷰에서도 여전히 발생했습니다. 사실, 둘 사이에는 큰 유사점이 있지만 몇 가지 차이점도 있습니다.

• 생성자는 ECMAScript의 일부입니다. 반면에 ngOnInit()은 각도의 개념입니다.

• Angular를 사용하지 않더라도 모든 클래스에서 생성자를 호출할 수 있습니다.

• LifeCycle: 생성자는 ngOnInt() 전에 호출됩니다.

• 생성자에서 HTML 요소를 호출할 수 없습니다. 그러나 ngOnInit()에서는 할 수 있습니다.

• 일반적으로 생성자가 아닌 ngOnInit()에서 서비스 호출

  출처: http://www.angular-tuto.com/Angular/Component#Diff

doudou

생성자() 는 매개변수를 허용하고 종속성 주입에 사용할 수 있으며 생성자()는 서비스 개체를 추가하는 데 사용할 수 있습니다.

생성자는 ngOnint() 전에 호출됩니다.

ngOnInit() 는 필요한 서비스 함수 호출로 구성 요소를 조작하거나 일반적으로 생성자가 아닌 ngOnInit()에서 서비스를 호출하기 위한 것입니다.

Naeem Bashir

생성자 는 Typescript 클래스에서 제공하는 기본 메서드로, 일반적으로 위의 예제 코드 와 같은 종속성 주입 서비스 또는 타이머 초기화, 소켓 연결 초기화에 사용되는 클래스 멤버 초기화 전용입니다.

 export class AppComponent { title = 'angular-fork-join'; constructor(private http: HttpClient) {}

ngOnInit : 구성 요소가 초기화될 때 호출되는 수명 주기 후크입니다. 예를 들어 비즈니스 로직, 데이터 초기화, API 호출 등을 위해 전용으로 제공되는 Angular에서 제공하는 API 호출을 보여주는 예제 코드입니다.

 export class HomeComponent implements OnInit { products = []; constructor(private dataService: DataService) { } ngOnInit() { this.dataService.sendGetRequest().subscribe((data: any[])=>{ console.log(data); this.products = data; }) } }

Rebai Ahmed

출처 : http:www.stackoverflow.com/questions/35763730/difference-between-constructor-and-ngoninit