생성자와 ngOnInit의 차이점
Angular는 ngOnInit기본적으로 라이프 사이클 후크 를 제공합니다 .
ngOnInit이미 constructor? 가있는 경우 왜 사용해야 합니까?
는 Constructor클래스가 인스턴스화 클래스와 그 서브 클래스의 필드의 적절한 초기화를 보장 될 때 실행되는 클래스의 기본 방법입니다. Angular 또는 더 나은 DI (Dependency Injector)는 생성자 매개 변수를 분석하고 호출하여 새 인스턴스를 new MyClass()만들 때 생성자 매개 변수의 유형과 일치하는 공급자를 찾고이를 해결하고 다음과 같이 생성자에 전달합니다.
new MyClass(someArg);
ngOnInit Angular가 구성 요소 생성을 완료했음을 나타 내기 위해 Angular2에서 호출하는 라이프 사이클 후크입니다.
다음 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 ()는 "시작"하기에 더 좋은 위치입니다. 구성 요소의 바인딩이 해결되는 위치 /시기입니다.
자세한 내용은 여기를 참조하십시오.
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
그런 다음에 만 변경 감지를 실행 하고 MyAppComponent 클래스 의 my-app및 호출 ngOnInit에 대한 바인딩을 업데이트합니다 . 그런 다음 ChildComponent 클래스에 대한 child-comp및 호출 ngOnInit에 대한 바인딩 업데이트를 진행합니다 .
생성자에서 또는 ngOnInit필요한 항목에 따라 초기화 논리를 수행 할 수 있습니다. 예를 들어, @ViewChild 쿼리를 평가하기 전에 ViewContainerRef를 얻는 방법에 대한 기사 는 생성자에서 수행해야 할 초기화 논리 유형을 보여줍니다.
다음은 주제를 더 잘 이해하는 데 도움이되는 몇 가지 기사입니다.
- Angular의 변경 감지에 대해 알아야 할 모든 것
- Angular의 $ digest가 Angular의 최신 버전에서 다시 태어났습니다.
- Angular에서 속성 바인딩 메커니즘 업데이트
가장 좋은 예는 서비스를 사용하는 것입니다. 내 구성 요소가 '활성화'되면 서버에서 데이터를 가져오고 싶다고 가정 해 보겠습니다. 서버에서 데이터를 가져온 후 데이터에 대해 몇 가지 추가 작업을 수행하고 싶다고 가정 해 보겠습니다. 오류가 발생하여 다른 방식으로 기록하고 싶습니다.
생성자를 통해 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();
};
}
보기가 훨씬 쉬워 지므로 초기화 할 때 다른 곳에서 찾아 볼 필요없이 구성 요소 내에서 함수를 호출합니다. 실제로 이것은 나중에 더 쉽게 읽고 사용할 수 있도록 사용할 수있는 또 다른 도구 일뿐입니다. 또한 생성자 내에 함수 호출을 넣는 것은 정말 나쁜 습관입니다!
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!');
}
}
첫 번째 (생성자)는 클래스 인스턴스화와 관련이 있으며 Angular2와 관련이 없습니다. 생성자는 모든 클래스에서 사용할 수 있음을 의미합니다. 새로 생성 된 인스턴스에 대해 초기화 처리를 할 수 있습니다.
두 번째는 Angular2 구성 요소의 수명주기 후크에 해당합니다.
공식 앵귤러 웹 사이트에서 인용 :
ngOnChanges입력 또는 출력 바인딩 값이 변경 될 때 호출됩니다.ngOnInit첫 번째 이후에 호출됩니다ngOnChanges
따라서 ngOnInit초기화 처리가 구성 요소의 바인딩 (예 :로 정의 된 구성 요소 매개 변수 @Input) 에 의존 하는 경우 사용해야 합니다 . 그렇지 않으면 생성자로 충분합니다.
난 그냥 위의 설명에서 생략하고 때 설명 된 하나 개 중요한 것은 추가 할 것입니다 해야 사용합니다 ngOnInit.
ViewChildren , ContentChildren 또는 ElementRef 등을 통해 구성 요소의 DOM을 조작 하는 경우 생성자 단계에서 기본 요소를 사용할 수 없습니다.
그러나 ngOnInit구성 요소가 생성되고 검사 ( ngOnChanges)가 호출되면 발생하므로이 시점에서 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
}
}
짧고 간단한 대답은
Constructor: constructorA는 default method(실행 deafult 의해 성분이 구성되는 경우). 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 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() {
}
}
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 ***
다른 많은 언어와 마찬가지로 클래스 수준, 생성자 또는 메서드에서 변수를 초기화 할 수 있습니다. 특정 경우에 가장 적합한 것을 결정하는 것은 개발자의 몫입니다. 그러나 다음은 결정에 관한 모범 사례 목록입니다.
클래스 수준 변수
일반적으로 나머지 구성 요소에서 사용할 모든 변수를 여기에 선언합니다. 값이 다른 것에 의존하지 않는 경우 초기화하거나 변경되지 않을 경우 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 프레임 워크를 사용 중이고 특정 수명주기 이벤트와 상호 작용해야하는 경우 프레임 워크에서 제공하는 메서드를 사용하여 문제를 방지하세요.
생성자의 주요 차이점 은 라이프 사이클 후크 이며 생성자 이후에 실행 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();
}
생성자만으로는 구현할 수 없습니다.
위의 답변은 원래 질문의이 측면에 실제로 답변하지 않습니다. 수명주기 후크 란 무엇입니까? 이런 식으로 생각할 때까지 그것이 의미하는 바를 이해하는 데 시간이 걸렸습니다.
1) 구성 요소가 인간이라고 가정하십시오. 인간은 여러 단계의 삶을 포함하는 삶을 가지고 있으며 우리는 만료됩니다.
2) 인간 구성 요소는 다음과 같은 수명주기 스크립트를 가질 수 있습니다 : 출생, 아기, 초등학교, 청년, 중년 성인, 노인, 사망, 처분.
3) 자녀를 만드는 기능을 갖고 싶다고합시다. 이것이 복잡하고 유머러스하게되는 것을 막기 위해, 당신은 당신의 기능이 인간 구성 요소 생활의 청년 단계에서만 호출되기를 원합니다. 따라서 부모 구성 요소가 청소년 단계에있을 때만 활성화되는 구성 요소를 개발합니다. 후크는 삶의 단계를 알리고 구성 요소가 작동하도록하여이를 수행하는 데 도움이됩니다.
재미있는 것들. 상상력이 실제로 이와 같은 코딩을하게된다면 복잡하고 재미있어집니다.
생성자는 자바 스크립트의 방법이며, 클래스가 바로이 코너 프레임 워크를 사용할지 여부를 생성자를 실행하거나이 자바 스크립트 엔진에 의해 호출됩니다 not.So와 각도가 더있다 인스턴스화 .When ES6의 클래스의 기능으로 간주됩니다 그것에 대한 통제.
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에서 생성자를 사용하는 이유는 무엇입니까?
대답은 종속성 주입입니다 . 앞에서 언급했듯이 생성자는 클래스가 인스턴스화 될 때 (Angular에 의해 ngOnInit를 호출하기 전에) JavaScript 엔진에서 즉시 호출하므로 typescript는 종속성 유형이 생성자에서 정의되고 마지막으로 알려줍니다. 특정 구성 요소에서 사용하려는 종속성 유형을 Angular.
여기서 관찰해야 할 두 가지 사항 :
- 생성자는 해당 클래스의 객체가 생성 될 때마다 호출됩니다.
- 구성 요소가 생성되면 ngOnInit가 호출됩니다.
둘 다 사용성이 다릅니다.
constructor () 는 컴포넌트 라이프 사이클의 기본 메소드이며 종속성 주입에 사용됩니다. 생성자는 Typescript 기능입니다.
ngOnInit () 는 생성자 다음에 호출되고 ngOnInit는 첫 번째 ngOnChanges 후에 호출됩니다.
즉 Constructor ()-> ngOnChanges ()-> ngOnInit ()
위에서 언급했듯이 ngOnChanges ()는 입력 또는 출력 바인딩 값이 변경 될 때 호출됩니다.
두 방법 모두 목표 / 책임이 다릅니다. 생성자의 작업 (언어 지원 기능)은 표현 불변이 유지되는지 확인하는 것입니다. 그렇지 않으면 멤버에게 올바른 값을 제공하여 인스턴스가 유효한지 확인하기 위해 명시됩니다. '올바른'의미를 결정하는 것은 개발자의 몫입니다.
onInit () 메서드 (각도 개념)의 작업은 올바른 개체 (불변 표현)에 대한 메서드 호출을 허용하는 것입니다. 각 메소드는 메소드가 종료 될 때 불변 표현이 유지되도록해야합니다.
생성자는 '올바른'객체를 만드는 데 사용되어야하며 onInit 메서드는 잘 정의 된 인스턴스에서 메서드 호출을 호출 할 수있는 기회를 제공합니다.
생성자 : ES6 클래스 (또는이 경우 TypeScript)의 생성자 메서드는 Angular 기능이 아니라 클래스 자체의 기능입니다. 생성자가 호출 될 때 Angular의 제어를 벗어났습니다. 즉, Angular가 구성 요소 초기화를 완료 한시기를 알려주는 적절한 후크가 아닙니다. JavaScript 엔진은 Angular가 아닌 생성자를 직접 호출합니다. 이것이 ngOnInit (및 AngularJS의 $ onInit) 수명주기 후크가 생성 된 이유입니다. 이를 염두에두고 생성자를 사용하는 데 적합한 시나리오가 있습니다. 이것은 우리가 의존성 주입을 사용하고 싶을 때입니다.
생성자는 JavaScript 엔진에 의해 초기화되고 TypeScript를 사용하면 특정 속성에 대해 매핑해야하는 종속성을 Angular에 알릴 수 있습니다.
ngOnInit 은 순전히 Angular가 구성 요소 초기화를 완료했다는 신호를 제공하기 위해 있습니다.
이 단계에는 @Input () 데코레이터 사용과 같이 컴포넌트 자체에 바인딩 할 수있는 속성에 대한 변경 감지의 첫 번째 단계가 포함됩니다.
이로 인해 @Input () 속성은 ngOnInit 내에서 사용할 수 있지만 설계 상 생성자 내에서는 정의되지 않습니다.
생성자는 첫 번째이며 @input 데이터가 null 일 때 가끔 발생합니다! 그래서 우리는 서비스 선언을 위해 Constructor를 사용하고 ngOnInit는 그 후에 발생합니다. contrutor에 대한 예시 :
constructor(translate: TranslateService, private oauthService: OAuthService) {
translate.setDefaultLang('En');
translate.use('En');}
onInit의 예 :
ngOnInit() {
this.items = [
{ label: 'A', icon: 'fa fa-home', routerLink: ['/'] },
{ label: 'B', icon: 'fa fa-home', routerLink: ['/'] }]
}
onInit은 winForm의 InitialComponents ()와 같다고 생각합니다.
Angular 라이프 사이클에서
1) 각도 주입기는 생성자 매개 변수를 감지하고 클래스를 인스턴스화합니다.
2) 다음 각도 호출 수명주기
ngOnChanges-> 지시어 매개 변수 바인딩을 호출합니다.
ngOnInit-> 각도 렌더링 시작 ...
각도 수명주기 상태로 다른 메서드를 호출합니다.
이 constructor때 각도 "instanciates / 구조"구성 요소라고합니다. ngOnInit방법은 컴포넌트의 초기화 기간의 일부를 나타내고, 후크이다. 좋은 방법은 서비스 주입 에만 사용하는 것입니다 .
constructor(private
service1: Service1,
service2: Service2
){};
가능하더라도 내부에서 "일"을해서는 안됩니다. 구성 요소 "초기화"에서 발생해야하는 일부 작업을 시작하려면 ngOnInit다음을 사용하십시오 .
ngOnInit(){
service1.someWork();
};
또한 부모 구성 요소에서 오는 입력 속성 과 관련된 작업 은 생성자에서 수행 할 수 없습니다. ngOnInit메소드 또는 다른 후크에 배치해야합니다 . 뷰 (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
};
나는 답을 찾았고 그것을 영어로 번역하려고했습니다.이 질문은 기술 인터뷰에서도 여전히 발생했습니다. 사실 둘 사이에는 큰 유사점이 있지만 약간의 차이점도 있습니다.
생성자는 ECMAScript의 일부입니다. 반면에 ngOnInit ()는 각도의 개념입니다.
Angular를 사용하지 않더라도 모든 클래스에서 생성자를 호출 할 수 있습니다.
LifeCycle : 생성자가 ngOnInt () 전에 호출됩니다.
생성자에서 HTML 요소를 호출 할 수 없습니다. 그러나 ngOnInit ()에서는 가능합니다.
일반적으로 생성자가 아닌 ngOnInit ()에서 서비스 호출
그만큼
@Input
통신 메커니즘은 다음 변경 감지 단계의 일부로 처리되므로 생성자에서 입력 바인딩을 사용할 수 없습니다.
constructor() 의존성 주입을하는 데 사용됩니다.
ngOnInit(), ngOnChanges()및 ngOnDestroy()등주기 방법이다. 바운드 속성의 값이 변경 ngOnChanges()되기 전에 먼저 ngOnInit()호출됩니다. 변경 사항이 없으면 호출되지 않습니다. ngOnDestroy()구성 요소가 제거되면 호출됩니다. 그것을 사용하려면 수업에서 교육을 OnDestroy받아야합니다 implement.
생성자 는 컴포넌트 (또는 다른 클래스)가 빌드 될 때 실행되는 함수입니다.
ngOnInit 는 컴포넌트 라이프 사이클 메소드 그룹에 속하는 함수이며 컴포넌트의 다른 순간에 실행됩니다 (이것이 라이프 사이클 이름을 지정하는 이유입니다). 다음은 모두 목록입니다.
생성자는 수명주기 함수보다 먼저 실행됩니다.
참고 URL : https://stackoverflow.com/questions/35763730/difference-between-constructor-and-ngoninit
'programing' 카테고리의 다른 글
| : :( 이중 콜론) 연산자 (Java 8) (0) | 2020.09.28 |
|---|---|
| 드로어 블을 비트 맵으로 변환하는 방법은 무엇입니까? (0) | 2020.09.28 |
| Swift의 #pragma 마크? (0) | 2020.09.28 |
| 외부 JAR에서 "오류 1로 인해 Dalvik 형식으로 변환 실패" (0) | 2020.09.28 |
| JSON을 C # 동적 개체로 역 직렬화 하시겠습니까? (0) | 2020.09.28 |