생성자와 ngOnInit의 차이점
Angular는 수명 주기 후크를 제공합니다.ngOnInit결석으로
왜 그래야 합니까?ngOnInit만약 우리가 이미 가지고 있다면, 사용됩니다.constructor?
그Constructor클래스가 인스턴스화될 때 실행되는 클래스의 기본 메서드이며 클래스 및 하위 클래스의 필드를 올바르게 초기화합니다.Angular Injector 변수를 하고 생성자가 새때 "Dependency Injector(의존성 Injector)"를 합니다.new MyClass()생성자 매개 변수의 유형과 일치하는 공급자를 찾고, 이를 해결하여 생성자에게 전달합니다.
new MyClass(someArg);
ngOnInitAngular가 구성 요소 생성을 완료했음을 나타내기 위해 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()는 "시작"하기에 더 나은 위치입니다. 즉, 구성 요소의 바인딩이 해결되는 위치입니다.
자세한 내용은 여기를 참조하십시오.
생성자에서 @Input 값에 액세스할 수 없음에 유의해야 합니다(댓글에 대한 제안은 @tim 덕분입니다).
기사 Angular에서 Constructor와 ngOnInit의 본질적인 차이는 여러 관점에서 차이를 탐구합니다.이 답변은 구성 요소 초기화 프로세스와 관련된 가장 중요한 차이점을 설명하며, 사용법의 차이도 보여줍니다.
Angular 부트스트랩 프로세스는 두 가지 주요 단계로 구성됩니다.
- 구성 요소 트리 구성
- 변경 사항 탐지 실행
Angular가 성분 트리를 생성할 때 성분 생성자를 호출합니다.모든 수명 주기 후크는 실행 중인 변경 탐지의 일부로 호출됩니다.
Angular가 구성 요소 트리를 구성할 때 루트 모듈 인젝터가 이미 구성되어 있으므로 글로벌 종속성을 주입할 수 있습니다.또한 Angular가 자식 구성 요소 클래스를 인스턴스화할 때 부모 구성 요소에 대한 인젝터도 이미 설정되어 있으므로 부모 구성 요소 자체를 포함하여 부모 구성 요소에 정의된 공급자를 주입할 수 있습니다.구성 요소 생성자는 인젝터의 컨텍스트에서 호출되는 유일한 메서드이므로 종속성이 필요한 경우 이러한 종속성을 가져올 수 있는 유일한 위치입니다.
Angular가 변경 검출을 시작하면 구성 요소 트리가 생성되고 트리의 모든 구성 요소에 대한 생성자가 호출됩니다.또한 모든 구성 요소의 템플릿 노드가 DOM에 추가됩니다. 그@Input통신 메커니즘은 변경 탐지 중에 처리되므로 생성자에서 속성을 사용할 수 없습니다.다음 날짜에 사용할 수 있습니다.ngOnInit.
간단한 예를 보겠습니다.다음 템플릿이 있다고 가정합니다.
<my-app>
<child-comp [i]='prop'>
Angular는 애플리케이션의 부트스트랩을 시작합니다.앞서 말씀드렸듯이 먼저 각 구성 요소에 대한 클래스를 만듭니다.그래서 부르는군요.MyAppComponent또한 DOM의 호스트 합니다.my-app요소.그런 다음 호스트 요소를 생성합니다.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 및호라고 부릅니다.ngOnInitMyApp Component 클래다니있습에스그런 다음 에 대한 바인딩 업데이트를 진행합니다.child-comp 및호라고 부릅니다.ngOnInitChild Component 클래니 다있습.
또는 초화로생또에서 할 수 .ngOnInit사용 가능한 항목에 따라 다릅니다.예를 들어, Here is how to get ViewContainerRef before @ViewChild 쿼리를 평가하는 방법은 생성자에서 수행해야 할 초기화 로직 유형을 보여줍니다.
다음은 주제를 더 잘 이해하는 데 도움이 될 몇 가지 기사입니다.
- Angular의 변경 탐지에 대해 알아야 할 모든 정보
- Angular의 $digest가 Angular의 새로운 버전으로 다시 태어났습니다.
- Angular에서 속성 바인딩의 메커니즘이 업데이트됩니다.
네, 일단.ngOnInitAngular 라이프사이클의 일부이지만constructorES6 JavaScript 클래스의 일부이므로 주요 차이점은 바로 여기에서 시작됩니다!...
Angular의 라이프사이클을 보여주는 아래 차트를 보세요.
Angular2에서는 Angular2+에서는다사용다니합음을 합니다.constructor을 하기 위하여DI(Dependency Injection)Angular 1에서 String 메서드를 호출하고 어떤 종속성이 주입되었는지 확인하는 과정에서 발생했습니다.
도표에서 , 위다그램보서듯이에어이의,이보▁as,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!');
}
}
가장 좋은 예는 서비스를 이용하는 것이라고 생각합니다.구성 요소가 '활성화'될 때 서버에서 데이터를 가져오려고 합니다.서버에서 데이터를 가져온 후에 추가 작업을 수행하려고 합니다. 오류가 발생하여 다른 방식으로 기록하려고 합니다.
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를 채울 수 있지만, 아마도 나는 그것으로 몇 가지 추가적인 일을 하고 싶을 것입니다.모든 것이 opper_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();
};
}
이 기능을 사용하면 훨씬 쉽게 볼 수 있기 때문에 초기화할 때 다른 곳에서 찾을 필요 없이 구성 요소 내에서 기능을 호출합니다.실제로 이것은 미래에 더 쉽게 읽고 사용할 수 있는 또 다른 도구일 뿐입니다.또한 생성자 내에 함수 호출을 넣는 것은 정말 나쁜 관행이라고 생각합니다!
위의 설명에서 생략한 한 가지 중요한 사항과 사용해야 하는 경우에 대해 설명하겠습니다.ngOnInit.
예를 들어 구성 요소의 DOM을 조작하는 경우.ViewChildren, ContentChildren 또는 ElementRef. 생성자 단계에서는 기본 요소를 사용할 수 없습니다.
하만지 이후로, 그이로.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
}
}
첫 번째 항목(생성자)은 클래스 인스턴스화와 관련이 있으며 Angular2와는 아무런 관련이 없습니다.제 말은 컨스트럭터는 어떤 클래스에서도 사용할 수 있다는 것입니다.새로 생성된 인스턴스에 대한 초기화 처리를 추가할 수 있습니다.
두 번째는 Angular2 구성 요소의 라이프사이클 후크에 해당합니다.
오피셜 앵글의 웹사이트에서 인용:
ngOnChanges또는 값이 될 때 됩니다.ngOnInit첫 번째 뒤에 호출됩니다.ngOnChanges
그래서 당신은 사용해야 합니다.ngOnInit요소의 하는 경우(예: 구성 요소 변수를 사용하여 된 구성 요소 매개 변수).@Input 그지렇않생로충분것입다니할성자으면▁),것다입.
짧고 간단한 대답은 다음과 같습니다.
Constructor :constructor입니다.default method구성 요소가 생성될 때(기본적으로) 실행됩니다.생성할 때an instance그 때도 같은 부류의constructor(default method)라고 할 것입니다.때 구성요가다같음을때과소▁so때같을▁is▁when▁the▁component다,음▁being▁in과▁words즉,.constructed or/and an instance is created constructor(default method)이 호출되고 내부에 관련 코드가 기록됩니다.으로 그리고 으로 기적으그일로으반적리고로본으로.Angular2그것은 같은 것들을 주입하곤 했습니다.services추가 사용을 위해 구성 요소를 구성하는 경우.
OnInitngOnInit는 구성 요소의 수명 주기 후크로, 다음 시간 이후에 먼저 실행됩니다.constructor(default method)구성 요소를 초기화하는 중입니다.
따라서 생성자가 먼저 호출되고 생성자 메서드가 끝나면 Oninit가 나중에 호출됩니다.
부트.츠
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()
}
}
리소스:라이프 사이클 후크
두 가지를 모두 구현한 이 작은 데모를 확인할 수 있습니다.
와 생와자생사주요차의 주요 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에서는 생성자보다 유연성이 뛰어나며 유닛 테스트에 대한 몇 가지 이점을 제공하며, 이 답변에 자세히 설명되어 있습니다.
을 고려해서 면하려을고▁thatering면.ngOnInit단위 테스트에서 구성 요소 컴파일 시 자동으로 호출되지 않습니다. 메서드는 호출됩니다.ngOnInit구성 요소 인스턴스화 후 스파이 활동을 하거나 조롱할 수 있습니다.
인 경우에는 예적인경우외.ngOnInit다른 구성 요소 장치(예: 일부 템플릿 로직)를 분리할 수 있도록 완전히 스텁할 수 있습니다.
상속
자식 클래스는 생성자만 증가시킬 수 있고 대체할 수 없습니다.
때부터this 없음수 앞에 할 수 .super()초기화 우선 순위에 제한이 있습니다.
Angular 구성 요소 또는 지시문이 다음을 사용한다는 점을 고려합니다.ngOnInit에 민감하지 않은 의 경우, 는 시에민감않초로경하우직클다위래는음다수있선중하니습택할를간나스의하기지화은,▁whether▁for▁child▁can다▁classes▁choseization있니습수시▁logic-간선택▁time할▁initial하ensitive에를ins나를 선택할 수 있습니다.super.ngOnInit()를 호출하고 다음과 같은 경우:
ngOnInit() {
this.someMethod();
super.ngOnInit();
}
이것은 생성자만으로는 구현이 불가능할 것입니다.
다른 많은 언어와 마찬가지로 클래스 수준, 생성자 또는 메서드에서 변수를 초기화할 수 있습니다.특정 사례에서 무엇이 최선인지 결정하는 것은 개발자에게 달려 있습니다.그러나 다음은 의사 결정과 관련된 모범 사례 목록입니다.
클래스 수준 변수
일반적으로 나머지 구성 요소에서 사용될 모든 변수를 여기에 선언합니다.값이 다른 항목에 의존하지 않는 경우에는 값을 초기화하거나, 변경되지 않는 경우에는 const 키워드를 사용하여 상수를 만들 수 있습니다.
export class TestClass{
let varA: string = "hello";
}
생성자
일반적으로 생성자에서 아무것도 하지 않고 주입될 클래스에만 사용하는 것이 가장 좋습니다.대부분의 경우 생성자의 모양은 다음과 같습니다.
constructor(private http: Http, private customService: CustomService) {}
변수가 는 클스레변자생액수있로할세다습니스므되성로래동으에 액세스할 수 .customService.myMethod()수동으로 수행할 필요가 없습니다.
NgOnInit
NgOnit은 Angular 2 프레임워크에서 제공하는 라이프사이클 후크입니다. 요소는 구성요구합니다를 해야 합니다.OnInit그것을 사용하기 위해.이 수명 주기 후크는 생성자가 호출되고 모든 변수가 초기화된 후에 호출됩니다.초기화의 대부분은 여기에 있어야 합니다.할 수 .OnInit구성 요소가 제대로 로드되지 않았을 때 작업을 수행하는 것과 비교합니다.
다음은 호출되는 순서를 자세히 설명하는 이미지입니다.
https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html
TLDR
Angular 2 프레임워크를 사용하고 있으며 특정 수명 주기 이벤트와 상호 작용해야 하는 경우에는 프레임워크에서 제공하는 방법을 사용하여 문제를 방지하십시오.
이를 테스트하기 위해 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 ***
위의 답변은 원래 질문의 이러한 측면에 대해 실제로 답변하지 않습니다.라이프사이클 후크란 무엇입니까?제가 이런 식으로 생각하기 전까지는 그것이 무엇을 의미하는지 이해하는 데 시간이 좀 걸렸습니다.
구성 요소가 사람이라고 가정해 보십시오.인간은 삶의 많은 단계를 포함하는 삶을 살고, 그리고 나서 우리는 소멸합니다.
우리의 인간 구성요소는 다음과 같은 라이프사이클 스크립트를 가질 수 있습니다: 출생, 아기, 초등학교, 젊은 성인, 중년 성인, 노인, 사망, 폐기.
아이들을 만드는 기능을 갖고 싶다고 해보세요.이 문제가 복잡해지고 다소 유머러스해지는 것을 방지하기 위해, 여러분은 인간 구성 요소 삶의 젊은 성인 단계에서만 기능이 호출되기를 원합니다.따라서 상위 구성요소가 젊은 성인 단계에 있을 때만 활성화되는 구성요소를 개발합니다.후크는 삶의 단계를 신호하고 구성 요소가 그 단계에 작용하도록 함으로써 당신이 그렇게 하도록 도와줍니다.
재밌는 거.만약 여러분의 상상력이 실제로 이런 것들을 코딩하는 것으로 간다면, 그것은 복잡하고 재미있게 될 것입니다.
생성자는 JavaScript의 메서드이며 es6에서 클래스의 기능으로 간주됩니다.클래스가 인스턴스화되면 Angular 프레임워크에서 사용되는지 여부에 관계없이 생성자가 즉시 실행됩니다.자바스크립트 엔진에 의해 호출되며 Angular는 이를 제어할 수 없습니다.
import {Component} from '@angular/core';
@Component({})
class CONSTRUCTORTEST {
//This is called by Javascript not the Angular.
constructor(){
console.log("view constructor initialised");
}
}
"생성자 테스트" 클래스는 아래에 예시되어 있습니다.그래서 내부적으로 생성자를 호출합니다(이 모든 것은 JavaScript(es6) no Angular에 의해 발생합니다).
new CONSTRUCTORTEST();
따라서 Angular.ngOnInit은 Angular가 구성 요소 초기화를 완료했을 때 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에서 컨스트럭터를 사용하는지 물어볼 수도 있습니다.
답은 의존성 주사입니다.앞에서 언급했듯이, 생성자는 클래스가 인스턴스화될 때(ngOnInit by Angular를 호출하기 전에) JavaScript 엔진을 통해 즉시 호출하므로, 유형 스크립트는 생성자에 정의된 종속성 유형을 가져오는 데 도움이 되고 마지막으로 특정 구성 요소에서 사용할 종속성 유형을 Angular에 알려줍니다.
생성자()는 구성 요소 수명 주기의 기본 방법이며 종속성 주입에 사용됩니다.생성자는 유형 스크립트 피쳐입니다.
ngOnInit()는 생성자 뒤에 호출되고 ngOnInit는 첫 번째 ngOnChanges 뒤에 호출됩니다.
예:
생성자() ngOnChanges() ngOnInit()
한 바와 ngOnChanges()입력 또는 출력 바인딩 값이 변경될 때 호출됩니다.
여기서 관찰해야 할 두 가지 사항:
- 생성자는 해당 클래스의 개체가 생성될 때마다 호출됩니다.
- 구성 요소가 생성되면 ngOnInit가 호출됩니다.
둘 다 사용성이 다릅니다.
생성자:ES6 클래스(또는 이 경우 TypeScript)의 생성자 메서드는 Angular 피쳐가 아닌 클래스 자체의 피쳐입니다.생성자가 호출될 때 Angular의 제어를 벗어나므로 Angular가 구성 요소 초기화를 완료했을 때 이를 알려주는 것은 적합한 후크가 아닙니다.JavaScript 엔진은 Angular를 직접 호출하지 않고 생성자를 호출합니다.그렇기 때문에 ngOnInit(및 Angular의 $onInit)이 필요합니다.JS) 수명 주기 후크가 생성되었습니다.이를 고려하여 생성자를 사용하기 위한 적절한 시나리오가 있습니다.이는 의존성 주입(기본적으로 구성 요소에 대한 의존성을 "연결"하는 데)을 활용하고자 할 때입니다.
생성자가 JavaScript 엔진에 의해 초기화되고 TypeScript를 사용하면 특정 속성에 대해 매핑해야 하는 종속성을 Angular에 알려줄 수 있습니다.
ngOnInit는 Angular가 구성 요소 초기화를 완료했다는 신호를 제공하기 위해 순수하게 존재합니다.
이 단계에는 @Input() 장식기 사용과 같이 구성요소 자체에 바인딩할 수 있는 속성에 대한 변경 탐지의 첫 번째 패스가 포함됩니다.
이로 인해 ngOnInit 내부에서 @Input() 속성을 사용할 수 있지만, 생성자 내부에서는 설계상 정의되어 있지 않습니다.
Constructor가 가장 먼저 실행되며, @input data가 null!일 때 가끔 발생하기 때문에 Constructor를 사용하여 서비스를 주입하고 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의 InitialComponent()와 같다고 생각합니다.
두 방법 모두 목표/책임이 다릅니다.생성자(언어 지원 기능)의 작업은 표현 불변성이 유지되는지 확인하는 것입니다.또는 구성원에게 올바른 값을 부여하여 인스턴스가 유효한지 확인하기 위해 명시됩니다.'정답'이 무엇을 의미하는지 결정하는 것은 개발자에게 달려 있습니다.
onInit() 메서드(각도 개념)의 작업은 올바른 개체(표현 불변)에 대한 메서드 호출을 허용하는 것입니다.각 방법은 방법이 종료될 때 표현 불변량이 유지되는지 확인해야 합니다.
생성자는 '올바른' 개체를 만드는 데 사용되어야 하며, onInit 메서드는 잘 정의된 인스턴스에서 메서드 호출을 호출할 수 있는 기회를 제공합니다.
생성자는 클래스가 인스턴스화될 때 실행됩니다.각도와는 상관이 없습니다.Javascript의 기능이며 Angular는 이를 제어할 수 없습니다.
ngOnInit는 Angular에 고유하며 Angular가 모든 입력 속성으로 구성 요소를 초기화한 경우 호출됩니다.
@Input 속성은 ngOnInit 수명 주기 후크에서 사용할 수 있습니다.이렇게 하면 보기에 표시할 백엔드 서버의 데이터 가져오기 등과 같은 초기화 작업을 수행할 수 있습니다.
@입력 속성이 생성자 내부에서 정의되지 않은 것으로 표시됩니다.
Angular 라이프 사이클에서
각도 인젝터가 생성자 매개 변수를 감지하고 클래스를 인스턴스화합니다.
다음 각진 통화 수명 주기
ngOnChanges --> 지시 매개 변수 바인딩을 호출합니다.
ngOnInit --> 각도 렌더링 시작...
각 수명 주기 상태의 다른 메소드를 호출합니다.
그constructorAngular가 구성 요소를 "인스턴스/생성"할 때 호출됩니다. 그ngOnInit메서드는 구성 요소 수명 주기의 초기화 부분을 나타내는 후크입니다.서비스 주입에만 사용하는 것이 좋습니다.
constructor(private
service1: Service1,
service2: Service2
){};
그것이 가능하더라도, 당신은 내부에서 어떤 "일"을 해서는 안 됩니다.구성 요소 "초기화" 시 발생해야 하는 일부 작업을 시작하려면 다음을 사용합니다.ngOnInit:
ngOnInit(){
service1.someWork();
};
또한 상위 구성 요소에서 발생하는 입력 속성과 관련된 작업은 생성자에서 수행할 수 없습니다.그것들은 안에 놓여야 합니다.ngOnInit메서드 또는 다른 후크.뷰(DOM)와 관련된 요소(예: 뷰 하위 요소)도 마찬가지입니다.
@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
};
생성자는 구성 요소(또는 다른 클래스)가 생성될 때 실행되는 함수입니다.
ngOnInit는 구성 요소 수명 주기 방법 그룹에 속하는 함수이며 구성 요소의 다른 순간에 실행됩니다(그래서 이름 수명 주기).모든 목록은 다음과 같습니다.
생성자는 수명 주기 함수 이전에 실행됩니다.
생성자
생성자 함수는 모든 클래스에 제공되며 생성자는 Angular에 특정되지 않지만 Object 지향 설계에서 파생된 개념입니다.생성자는 구성 요소 클래스의 인스턴스를 만듭니다.
OnInit
그ngOnInit함수는 Angular 구성 요소의 수명 주기 방법 중 하나입니다.Angular 구성 요소의 수명 주기 방법(또는 후크)을 사용하면 구성 요소 수명의 다른 단계에서 코드 조각을 실행할 수 있습니다.방식과는 , 시자방식달는리과공,달,,ngOnInitMethod는 Angular 인터페이스(OnInit이 방법을 사용하려면 구성 요소가 구현해야 합니다. 그ngOnInit메서드는 구성 요소가 생성된 직후에 호출됩니다.
Constructor또한 ES6의 일부로 typescript는 es6 구문을 사용하고 있으며 현재 es7도 사용하고 있습니다. 따라서 정의한 대로 es5/es4에 컴파일할 typescript를 사용하여 이전 브라우저를 지원할 수 있습니다.
하는 동안에ngOnInIt각진 라이프사이클 후크입니다.구성 요소가 초기화되면 초기화됩니다.(새로운 삶에서 태어난 상태로 간주)
사용하는 것이 현명합니다.ngOnInIt생성자와 비교하면, 당신은 다음과 같은 또 다른 라이프사이클 후크를 가지고 있기 때문입니다.ngOnDestory(모든 생명의 죽음으로 간주합니다.)여기에서는 메모리 누수를 방지하는 데 좋은 관찰 항목에 대한 구독을 취소할 수 있습니다.
질문이 있을 경우 이 답변에 대해 자유롭게 의견을 제시해 주십시오.
constructor()종속성 주입에 사용됩니다.
ngOnInit(),ngOnChanges()그리고.ngOnDestroy()등은 라이프사이클 방법입니다. ngOnChanges()앞으로 가장 먼저 호출될 것입니다.ngOnInit()바인딩된 속성 값이 변경되면 변경 사항이 없으면 호출되지 않습니다. ngOnDestroy()구성 요소가 제거될 때 호출됩니다.그것을 사용하기 위해,OnDestroy 합니다.implement학급별로
저는 답을 찾아서 영어로 번역하려고 노력했습니다.이 질문은 기술 인터뷰에서도 여전히 제기되었습니다.사실, 그 둘 사이에는 큰 유사점이 있지만, 약간의 차이점도 있습니다.
생성자는 ECMA스크립트의 일부입니다.반면에 ngOnInit()는 각의 개념입니다.
Angular를 사용하지 않더라도 모든 클래스의 생성자를 호출할 수 있습니다.
라이프사이클:ngOnInt() 앞에 생성자를 호출합니다.
생성자에서 HTML 요소를 호출할 수 없습니다.그러나 ngOnInit()에서는 가능합니다.
일반적으로 생성자가 아닌 ngOnInit()에 있는 서비스 호출
출처: http://www.angular-tuto.com/Angular/Component#Diff
생성자()는 매개 변수를 허용할 수 있으며 종속성 주입에 사용하거나 생성자()는 서비스 개체를 추가하는 데 사용할 수 있습니다.
ngOnint() 앞에 생성자를 호출합니다.
ngOnInit()는 필요한 서비스 함수 호출 또는 일반적으로 생성자가 아닌 ngOnInit()의 서비스 호출로 구성 요소를 조작하기 위한 것입니다.
생성자는 Typescript 클래스에서 제공하는 기본 메서드로, 클래스 멤버를 초기화하는 데 전용이며 일반적으로 위의 예제 코드나 타이머 초기화, 소켓 연결 초기화와 같은 종속성 주입 서비스에 사용됩니다.
export class AppComponent {
title = 'angular-fork-join';
constructor(private http: HttpClient) {}
ngOnInit: 구성 요소가 Angular에 의해 초기화될 때 호출되는 라이프사이클 후크로, 예를 들어 비즈니스 로직, 데이터 초기화, API 호출 등을 전담합니다. 예를 들어 API 호출을 보여주는 코드:
export class HomeComponent implements OnInit {
products = [];
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.sendGetRequest().subscribe((data: any[])=>{
console.log(data);
this.products = data;
})
}
}
언급URL : https://stackoverflow.com/questions/35763730/difference-between-constructor-and-ngoninit
'programing' 카테고리의 다른 글
| 내부의.SQL Azure의 Net Framework 데이터 공급자 오류 6 (0) | 2023.05.14 |
|---|---|
| 페이지를 나가기 전에 저장하지 않은 변경 사항에 대해 사용자에게 경고 (0) | 2023.05.09 |
| 왜 그럴까요?수집이 null인 경우 각 루프 스로우 NullRefException에 대한 NET? (0) | 2023.05.09 |
| 시작 시 단일 양식 숨기기 (0) | 2023.05.09 |
| 문자열의 마지막 단어 바꾸기 - C# (0) | 2023.05.09 |