Sự khác biệt giữa Constructor và ngOnInit

1161
Haseena P A 2016-03-03 19:14.

Angular cung cấp móc vòng đời ngOnInittheo mặc định.

Tại sao nên ngOnInitsử dụng, nếu chúng ta đã có constructor?

25 answers

1186
Pardeep Jain 2016-03-03 19:20.

Phương thức Constructornày là một phương thức mặc định của lớp được thực thi khi lớp được khởi tạo và đảm bảo việc khởi tạo thích hợp các trường trong lớp và các lớp con của nó. Angular, hoặc tốt hơn là Dependency Injector (DI), phân tích các tham số của phương thức khởi tạo và khi nó tạo một phiên bản mới bằng cách gọi new MyClass()nó sẽ cố gắng tìm các nhà cung cấp phù hợp với loại của các tham số của hàm tạo, giải quyết chúng và chuyển chúng đến phương thức khởi tạo như

new MyClass(someArg);

ngOnInit là một móc vòng đời được gọi bởi Angular để chỉ ra rằng Angular đã hoàn thành việc tạo thành phần.

Chúng tôi phải nhập OnInitnhư thế này để sử dụng nó (thực tế việc triển khai OnInitkhông phải là bắt buộc nhưng được coi là thực hành tốt):

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

sau đó để sử dụng phương thức này OnInit, chúng ta phải triển khai lớp như thế này:

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

  ngOnInit() {
     // Called after the constructor and called  after the first ngOnChanges() 
  }
}

Triển khai giao diện này để thực thi logic khởi tạo tùy chỉnh sau khi các thuộc tính ràng buộc dữ liệu của chỉ thị của bạn đã được khởi tạo. ngOnInit được gọi ngay sau khi các thuộc tính liên kết dữ liệu của chỉ thị được kiểm tra lần đầu tiên và trước khi bất kỳ thuộc tính con nào của nó được kiểm tra. Nó chỉ được gọi một lần khi lệnh được khởi tạo.

Chủ yếu chúng tôi sử dụng ngOnInitcho tất cả các khởi tạo / khai báo và tránh những thứ hoạt động trong hàm tạo. Hàm tạo chỉ nên được sử dụng để khởi tạo các thành viên lớp nhưng không nên thực hiện "công việc" thực tế.

Vì vậy, bạn nên sử dụng constructor()để thiết lập Dependency Injection chứ không phải nhiều thứ khác. ngOnInit () là nơi tốt hơn để "bắt đầu" - đó là nơi / khi các ràng buộc của các thành phần được giải quyết.

Thông tin chi tiết tham khảo tại đây:

194
Max Koretskyi 2017-08-01 20:13.

Bài viết Sự khác biệt cơ bản giữa Constructor và ngOnInit trong Angular khám phá sự khác biệt từ nhiều khía cạnh. Câu trả lời này cung cấp giải thích sự khác biệt quan trọng nhất liên quan đến quá trình khởi tạo thành phần cũng cho thấy sự khác biệt trong cách sử dụng.

Quá trình Angular bootstrap bao gồm hai giai đoạn chính:

  • xây dựng cây thành phần
  • chạy phát hiện thay đổi

Hàm tạo của thành phần được gọi khi Angular xây dựng cây thành phần. Tất cả các móc vòng đời được gọi là một phần của việc chạy phát hiện thay đổi.

Khi Angular xây dựng cây thành phần, bộ tiêm mô-đun gốc đã được cấu hình để bạn có thể đưa vào bất kỳ phụ thuộc chung nào. Ngoài ra, khi Angular khởi tạo một lớp thành phần con, bộ tiêm cho thành phần mẹ cũng đã được thiết lập để bạn có thể chèn các nhà cung cấp được xác định trên thành phần mẹ bao gồm chính thành phần mẹ. Các hàm tạo thành phần là phương thức duy nhất được gọi trong ngữ cảnh của bộ phun, vì vậy nếu bạn cần bất kỳ phụ thuộc nào thì đó là nơi duy nhất để lấy các phụ thuộc đó.

Khi Angular bắt đầu phát hiện thay đổi, cây thành phần được xây dựng và các hàm tạo cho tất cả các thành phần trong cây đã được gọi. Ngoài ra, mọi nút mẫu của thành phần cũng được thêm vào DOM. Cơ @Inputchế giao tiếp được xử lý trong quá trình phát hiện thay đổi, do đó bạn không thể mong đợi có các thuộc tính có sẵn trong hàm tạo. Nó sẽ có sẵn vào sau ngOnInit.

Hãy xem một ví dụ nhanh. Giả sử bạn có mẫu sau:

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

Vì vậy, Angular bắt đầu khởi động ứng dụng. Như tôi đã nói đầu tiên nó tạo các lớp cho mỗi thành phần. Vì vậy, nó gọi hàm MyAppComponenttạo. Nó cũng tạo một nút DOM là phần tử máy chủ của my-appthành phần. Sau đó, nó tiến hành tạo một phần tử máy chủ cho hàm tạo child-compvà gọi ChildComponent. Ở giai đoạn này, nó không thực sự quan tâm đến iràng buộc đầu vào và bất kỳ móc vòng đời nào. Vì vậy, khi quá trình này kết thúc, Angular kết thúc với cây các khung nhìn thành phần sau:

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

Chỉ sau đó chạy các liên kết cập nhật và phát hiện thay đổi cho my-appvà các cuộc gọi ngOnInittrên lớp MyAppComponent. Sau đó, nó tiến hành cập nhật các ràng buộc cho child-compvà các cuộc gọi ngOnInittrên lớp ChildComponent.

Bạn có thể thực hiện logic khởi tạo của mình trong hàm tạo hoặc ngOnInittùy thuộc vào những gì bạn cần có sẵn. Ví dụ, bài viết Dưới đây là cách lấy ViewContainerRef trước khi truy vấn @ViewChild được đánh giá cho thấy loại logic khởi tạo nào có thể được yêu cầu để thực hiện trong phương thức khởi tạo.

Dưới đây là một số bài viết sẽ giúp bạn hiểu chủ đề hơn:

98
Morgan G 2016-03-03 19:30.

Tôi nghĩ ví dụ tốt nhất sẽ là sử dụng các dịch vụ. Giả sử rằng tôi muốn lấy dữ liệu từ máy chủ của mình khi thành phần của tôi được 'Kích hoạt'. Giả sử rằng tôi cũng muốn thực hiện một số việc bổ sung đối với dữ liệu sau khi tôi lấy dữ liệu từ máy chủ, có thể tôi gặp lỗi và muốn ghi lại dữ liệu đó theo cách khác.

Nó thực sự dễ dàng với ngOnInit trên một phương thức khởi tạo, nó cũng giới hạn số lượng lớp gọi lại mà tôi cần thêm vào ứng dụng của mình.

Ví dụ:

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


}

với hàm tạo của mình, tôi chỉ có thể gọi _userService của mình và điền user_list của tôi, nhưng có thể tôi muốn làm thêm một số việc với nó. Giống như đảm bảo rằng mọi thứ đều là chữ hoa, tôi không hoàn toàn chắc chắn về cách thức dữ liệu của tôi diễn ra.

Vì vậy, nó làm cho nó dễ dàng hơn nhiều để sử dụng 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();
    };


}

Nó làm cho nó dễ nhìn hơn nhiều và vì vậy tôi chỉ gọi hàm trong thành phần của mình khi tôi khởi tạo thay vì phải tìm kiếm nó ở một nơi khác. Thực sự nó chỉ là một công cụ khác mà bạn có thể sử dụng để đọc và sử dụng dễ dàng hơn trong tương lai. Ngoài ra, tôi thấy thực sự không tốt khi đặt các lệnh gọi hàm trong một hàm tạo!

88
Alireza 2017-06-06 00:04.

OK, trước hết ngOnInitlà một phần của vòng đời Angular , trong khi constructorlà một phần của lớp JavaScript ES6 , vì vậy sự khác biệt chính bắt đầu từ đây! ...

Nhìn vào biểu đồ dưới đây tôi đã tạo cho thấy vòng đời của Angular.

Trong Angular2 +, chúng tôi sử dụng constructorđể làm điều đó DI(Dependency Injection)cho chúng tôi, trong khi ở Angular 1, nó đã xảy ra thông qua việc gọi phương thức String và kiểm tra xem phụ thuộc nào đã được đưa vào.

Như bạn thấy trong sơ đồ trên, ngOnInitđang xảy ra sau khi hàm tạo đã sẵn sàng ngOnChnagesvà được kích hoạt sau khi thành phần đã sẵn sàng cho chúng ta. Tất cả quá trình khởi tạo có thể xảy ra trong giai đoạn này, một mẫu đơn giản là tiêm một dịch vụ và viết tắt nó trên init.

OK, tôi cũng chia sẻ một mã mẫu để bạn xem, hãy xem cách chúng tôi sử dụng ngOnInitconstructortrong mã bên dưới:

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!');
  }
}
61
Thierry Templier 2016-03-03 20:36.

Cái đầu tiên (hàm tạo) liên quan đến việc khởi tạo lớp và không liên quan gì đến Angular2. Ý tôi là một hàm tạo có thể được sử dụng trên bất kỳ lớp nào. Bạn có thể đưa vào đó một số xử lý khởi tạo cho phiên bản mới được tạo.

Cái thứ hai tương ứng với một móc vòng đời của các thành phần Angular2:

Trích dẫn từ trang web chính thức của angle:

  • ngOnChanges được gọi khi giá trị ràng buộc đầu vào hoặc đầu ra thay đổi
  • ngOnInit được gọi sau cái đầu tiên ngOnChanges

Vì vậy, bạn nên sử dụng ngOnInitnếu quá trình khởi tạo dựa trên các ràng buộc của thành phần (ví dụ: các tham số thành phần được xác định bằng @Input), nếu không hàm tạo sẽ là đủ ...

57
Miroslav Jonas 2018-01-30 01:16.

Tôi sẽ chỉ thêm một điều quan trọng đã được bỏ qua trong các giải thích ở trên và giải thích khi nào bạn PHẢI sử dụng ngOnInit.

Nếu bạn đang thực hiện bất kỳ thao tác nào đối với DOM của thành phần thông qua ví dụ như ViewChildren , ContentChildren hoặc ElementRef , các phần tử gốc của bạn sẽ không khả dụng trong giai đoạn khởi tạo.

Tuy nhiên, vì ngOnInitxảy ra khi thành phần đã được tạo và các kiểm tra ( ngOnChanges) đã được gọi, bạn có thể truy cập DOM tại thời điểm này.

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
  }
}
39
micronyks 2016-03-03 19:20.

Câu trả lời ngắn gọn và đơn giản sẽ là,

Constructor: constructorlà một default methodlần chạy ( theo mặc định ) khi thành phần đang được xây dựng. Khi bạn tạo an instancemột lớp, thời gian đó cũng constructor(default method)sẽ được gọi. Vì vậy, nói cách khác, khi thành phần đang được constructed or/and an instance is created constructor(default method)gọi và mã có liên quan được viết bên trong sẽ được gọi. Về cơ bản và nói chung Angular2, nó được sử dụng để đưa những thứ như serviceskhi thành phần đang được xây dựng để sử dụng thêm.

OnInit: ngOnInit là móc vòng đời của thành phần chạy đầu tiên sau constructor(default method)khi thành phần đang được khởi tạo.

Vì vậy, phương thức khởi tạo của bạn sẽ được gọi trước và Oninit sẽ được gọi sau phương thức khởi tạo.

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

Tài nguyên: Móc vòng đời

Bạn có thể kiểm tra bản demo nhỏ này cho thấy sự triển khai của cả hai điều.

23
Eduardo Dennis 2017-03-07 11:59.

Giống như nhiều ngôn ngữ khác, bạn có thể khởi tạo các biến ở cấp lớp, hàm tạo hoặc một phương thức. Nhà phát triển quyết định điều gì là tốt nhất trong trường hợp cụ thể của họ. Nhưng dưới đây là danh sách các phương pháp hay nhất khi quyết định.

Các biến cấp lớp

Thông thường, bạn sẽ khai báo tất cả các biến ở đây sẽ được sử dụng trong thành phần còn lại của bạn. Bạn có thể khởi tạo chúng nếu giá trị không phụ thuộc vào bất kỳ thứ gì khác hoặc sử dụng từ khóa const để tạo hằng nếu chúng không thay đổi.

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

Constructor

Thông thường, cách tốt nhất là không làm bất cứ điều gì trong hàm tạo và chỉ sử dụng nó cho các lớp sẽ được đưa vào. Hầu hết thời gian hàm tạo của bạn sẽ giống như sau:

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

điều này sẽ tự động tạo các biến cấp độ lớp, vì vậy bạn sẽ có quyền truy cập vào customService.myMethod()mà không cần phải thực hiện thủ công.

NgOnInit

NgOnit là một móc vòng đời được cung cấp bởi khung công tác Angular 2. Thành phần của bạn phải triển khai OnInitđể sử dụng nó. Vòng đời hook này được gọi sau khi hàm tạo được gọi và tất cả các biến được khởi tạo. Phần lớn quá trình khởi tạo của bạn sẽ đến đây. Bạn sẽ chắc chắn rằng Angular đã khởi tạo thành phần của bạn một cách chính xác và bạn có thể bắt đầu thực hiện bất kỳ logic nào bạn cần OnInitthay vì thực hiện mọi thứ khi thành phần của bạn chưa tải xong đúng cách.

Đây là hình ảnh mô tả chi tiết thứ tự của những gì được gọi:

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

TLDR

Nếu bạn đang sử dụng khung công tác Angular 2 và cần tương tác với các sự kiện vòng đời nhất định, hãy sử dụng các phương pháp được cung cấp bởi khung công tác này để tránh sự cố.

21
abbaf33f 2016-05-25 04:58.

Để kiểm tra điều này, tôi đã viết mã này, mượn từ Hướng dẫn 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;
  }

}

Đầu ra bảng điều khiển

JS: *** User class constructor property ***  
JS: *** User class constructor constructor ***  
JS: *** Login Component Constructor ***  
JS: *** User class constructor ngOnInit ***  
JS: *** Login Component ngOnInit ***  
20
Estus Flask 2018-02-10 02:35.

Sự khác biệt chính giữa hàm tạo và ngOnInitđó ngOnInitmóc vòng đời và chạy sau hàm tạo. Mẫu nội suy thành phần và giá trị ban đầu đầu vào không có sẵn trong phương thức khởi tạo, nhưng chúng có sẵn trong ngOnInit.

Sự khác biệt thực tế là ngOnInitảnh hưởng như thế nào đến cách cấu trúc mã. Hầu hết mã khởi tạo có thể được chuyển đến ngOnInit- miễn là điều này không tạo ra điều kiện chủng tộc .

Phản vật chất xây dựng

Một lượng lớn mã khởi tạo làm cho phương thức khởi tạo khó mở rộng, đọc và kiểm tra.

Một công thức thông thường để tách logic khởi tạo khỏi hàm tạo lớp là chuyển nó sang một phương thức khác như init:

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

  init() {...}
}

ngOnInit có thể phục vụ mục đích này trong các thành phần và chỉ thị:

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

ngOnInit() {
  // rest of initialization code
}

Tiêm phụ thuộc

Vai trò chính của các hàm tạo lớp trong Angular là chèn phụ thuộc. Bộ tạo cũng được sử dụng cho chú thích DI trong TypeScript. Hầu hết tất cả các phụ thuộc được gán như thuộc tính cho cá thể lớp.

Hàm tạo thành phần / chỉ thị trung bình đã đủ lớn vì nó có thể có chữ ký nhiều dòng do các phụ thuộc, việc đặt logic intialization không cần thiết vào thân hàm tạo sẽ góp phần tạo ra phản vật chất.

Khởi tạo không đồng bộ

Phương thức khởi tạo không đồng bộ thường có thể được coi là phản vật chất và có mùi vì quá trình khởi tạo lớp kết thúc trước khi quy trình không đồng bộ thực hiện và điều này có thể tạo ra các điều kiện đua. Nếu không phải như vậy, ngOnInitvà các móc vòng đời khác là những nơi tốt hơn cho việc này, đặc biệt vì chúng có thể được hưởng lợi từ asynccú pháp:

constructor(
  public foo: Foo,
  public errorHandler: ErrorHandler
) {}

async ngOnInit() {
  try {
    await this.foo.getBar();
    await this.foo.getBazThatDependsOnBar();
  } catch (err) {
    this.errorHandler.handleError(err);
  }
}

Nếu có các điều kiện chạy đua (bao gồm điều kiện mà một thành phần không nên xuất hiện khi lỗi khởi tạo), quy trình khởi tạo không đồng bộ sẽ diễn ra trước khi khởi tạo thành phần và được chuyển đến thành phần mẹ, bộ định tuyến, v.v.

Kiểm tra đơn vị

ngOnInitlinh hoạt hơn phương thức khởi tạo và cung cấp một số lợi ích cho kiểm thử đơn vị được giải thích chi tiết trong câu trả lời này .

Xem xét điều đó ngOnInitkhông được gọi tự động khi biên dịch thành phần trong các bài kiểm tra đơn vị, các phương thức được gọi trong ngOnInitcó thể bị theo dõi hoặc giả mạo sau khi khởi tạo thành phần.

Trong những trường hợp đặc biệt, ngOnInitcó thể được hoàn toàn sơ khai để cung cấp sự cô lập cho các đơn vị thành phần khác (ví dụ: một số logic mẫu).

Di sản

Các lớp con chỉ có thể tăng cường các hàm tạo chứ không thể thay thế chúng.

thiskhông thể được giới thiệu trước đó super(), điều này đặt ra các hạn chế về ưu tiên khởi tạo.

Xem xét rằng thành phần Angular hoặc chỉ thị sử dụng ngOnInitcho logic khởi tạo không phân biệt thời gian, các lớp con có thể chọn xem có super.ngOnInit()được gọi hay không và khi nào:

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

Điều này sẽ không thể thực hiện chỉ với hàm tạo.

13
Preston 2016-12-10 09:52.

Các câu trả lời trên không thực sự trả lời khía cạnh này của câu hỏi ban đầu: Cái móc vòng đời là gì? Tôi đã mất một lúc để hiểu điều đó có nghĩa là gì cho đến khi tôi nghĩ về nó theo cách này.

1) Giả sử thành phần của bạn là con người. Con người có cuộc sống bao gồm nhiều giai đoạn sống, và rồi chúng ta sẽ hết.

2) Thành phần con người của chúng ta có thể có tập lệnh vòng đời sau đây: Sinh ra, Trẻ sơ sinh, Cấp học, Thanh niên, Người lớn tuổi trung niên, Người lớn tuổi, Đã chết, Bị vứt bỏ.

3) Giả sử bạn muốn có một chức năng tạo trẻ em. Để điều này không trở nên phức tạp và khá hài hước, bạn muốn hàm của mình chỉ được gọi trong giai đoạn Trẻ trưởng thành của cuộc đời thành phần con người. Vì vậy, bạn phát triển một thành phần chỉ hoạt động khi thành phần chính ở giai đoạn Trẻ trưởng thành. Hooks giúp bạn làm điều đó bằng cách báo hiệu giai đoạn đó của cuộc đời và để thành phần của bạn hoạt động trên đó.

Công cụ thú vị. Nếu bạn để trí tưởng tượng của mình thực sự mã hóa một cái gì đó như thế này, nó sẽ trở nên phức tạp và buồn cười.

8
UniCoder 2017-06-13 02:34.

Hai điều cần quan sát ở đây:

  1. Hàm tạo được gọi bất cứ khi nào một đối tượng được tạo ra từ lớp đó.
  2. ngOnInit được gọi khi thành phần được tạo.

Cả hai đều có khả năng sử dụng khác nhau.

7
Negin 2017-05-02 20:14.

Hàm tạo là một phương thức trong JavaScript và được coi là một tính năng của lớp trong es6. Khi lớp được khởi tạo, nó ngay lập tức chạy phương thức khởi tạo cho dù nó có được sử dụng trong Angular framework hay không, vì vậy nó được gọi bởi JavaScript engine còn Angular thì không. kiểm soát về điều đó.

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

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

Lớp "ConstructorTest" được khởi tạo bên dưới; Vì vậy, nó gọi nội bộ hàm tạo (Tất cả những điều này xảy ra bởi JavaScript (es6) no Angular).

new CONSTRUCTORTEST();

Đó là lý do tại sao có vòng đời ngOnInit hook trong Angular.ngOnInit kết xuất khi Angular đã khởi tạo xong thành phần.

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

Đầu tiên chúng ta khởi tạo lớp như bên dưới, lớp này xảy ra với các phương thức khởi tạo chạy ngay lập tức.

let instance = new NGONINITTEST();

ngOnInit được gọi bởi Angular khi cần thiết như sau:

instance.ngOnInit();

Nhưng bạn có thể hỏi tại sao chúng ta lại sử dụng hàm tạo trong Angular?

Câu trả lời là việc tiêm các phụ thuộc . Như đã đề cập trước đây, hàm tạo gọi bởi JavaScript engine ngay lập tức khi lớp được khởi tạo (trước khi gọi ngOnInit bằng Angular), do đó, typecript giúp chúng ta có được kiểu của các phụ thuộc được định nghĩa trong hàm tạo và cuối cùng cho biết Angular loại phụ thuộc nào chúng ta muốn sử dụng trong thành phần cụ thể đó.

7
Shajin Chandran 2018-06-08 23:45.

constructor () là phương thức mặc định trong vòng đời Thành phần và được sử dụng để chèn phụ thuộc. Constructor là một Tính năng kiểu chỉ định.

ngOnInit () được gọi sau hàm tạo và ngOnInit được gọi sau ngOnChanges đầu tiên.

I E:

Constructor () -->ngOnChanges () -->ngOnInit ()

như đã đề cập ở trên ngOnChanges()được gọi khi một giá trị ràng buộc đầu vào hoặc đầu ra thay đổi.

4
Bruno Ranschaert 2017-01-10 09:20.

Cả hai phương pháp đều có các mục tiêu / trách nhiệm khác nhau. Nhiệm vụ của hàm tạo (là một tính năng được ngôn ngữ hỗ trợ) là đảm bảo rằng biểu diễn bất biến được giữ nguyên. Nếu không, tuyên bố để đảm bảo rằng cá thể hợp lệ bằng cách cung cấp các giá trị chính xác cho các thành viên. Nhà phát triển quyết định từ 'đúng' nghĩa là gì.

Nhiệm vụ của phương thức onInit () (là một khái niệm góc cạnh) là cho phép các lệnh gọi phương thức trên một đối tượng chính xác (bất biến biểu diễn). Mỗi phương thức lần lượt phải đảm bảo rằng biểu diễn bất biến giữ khi phương thức kết thúc.

Hàm khởi tạo nên được sử dụng để tạo các đối tượng 'đúng', phương thức onInit cho bạn cơ hội để gọi các lời gọi phương thức tại một thể hiện được xác định rõ.

4
JS dev 2017-12-20 20:47.

Constructor: Phương thức constructor trên một lớp ES6 (hoặc TypeScript trong trường hợp này) là một tính năng của chính lớp đó, chứ không phải là một tính năng Angular. Nó nằm ngoài tầm kiểm soát của Angular khi hàm tạo được gọi, có nghĩa là nó không phải là một hook phù hợp để cho bạn biết khi nào Angular đã hoàn thành khởi tạo thành phần. Công cụ JavaScript gọi hàm tạo, không gọi trực tiếp Angular. Đó là lý do tại sao móc vòng đời ngOnInit (và $ onInit trong AngularJS) được tạo ra. Lưu ý điều này, có một kịch bản phù hợp để sử dụng hàm tạo. Đây là khi chúng ta muốn sử dụng tính năng chèn phụ thuộc - về cơ bản là để "nối dây" các phụ thuộc vào thành phần.

Vì phương thức khởi tạo được khởi tạo bởi công cụ JavaScript và TypeScript cho phép chúng tôi cho Angular biết những phụ thuộc nào chúng tôi yêu cầu được ánh xạ với một thuộc tính cụ thể.

ngOnInit hoàn toàn ở đó để cung cấp cho chúng tôi tín hiệu rằng Angular đã hoàn thành khởi tạo thành phần.

Giai đoạn này bao gồm chuyển đầu tiên tại Change Detection chống lại các thuộc tính mà chúng tôi có thể liên kết với chính thành phần - chẳng hạn như sử dụng trình trang trí @Input ().

Do đó, các thuộc tính @Input () có sẵn bên trong ngOnInit, tuy nhiên, không được xác định bên trong hàm tạo, theo thiết kế

2
user1012506 2018-12-05 20:34.

Hàm tạo là mã đầu tiên và đôi khi nó xảy ra khi dữ liệu @input là rỗng! vì vậy chúng tôi sử dụng Constructor để khai báo các dịch vụ và ngOnInit sẽ xảy ra sau đó. Ví dụ cho contrutor:

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

Ví dụ cho onInit:

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

Tôi nghĩ rằng onInit giống như InitialComponents () trong winForm.

2
dasunse 2019-11-19 01:39.

Constructor được thực thi khi lớp được khởi tạo. Nó không liên quan gì đến góc cạnh. Đó là tính năng của Javascript và Angular không có quyền kiểm soát nó

NgOnInit là Angular cụ thể và được gọi khi Angular đã khởi tạo thành phần với tất cả các thuộc tính đầu vào của nó

Các thuộc tính @Input có sẵn trong móc vòng đời ngOnInit. Điều này sẽ giúp bạn thực hiện một số công việc khởi tạo như lấy dữ liệu từ máy chủ back-end, v.v. để hiển thị trong chế độ xem

Các thuộc tính @Input được hiển thị dưới dạng không xác định bên trong hàm tạo

1
Moslem Shahsavan 2017-11-04 20:02.

Trong vòng đời Angular

1) Bộ phun góc phát hiện (các) tham số phương thức khởi tạo và lớp khởi tạo.

2) Vòng đời cuộc gọi góc tiếp theo

Móc vòng đời góc

ngOnChanges -> Gọi các tham số chỉ thị ràng buộc.

ngOnInit -> Bắt đầu kết xuất góc ...

Gọi phương pháp khác với trạng thái của vòng đời góc.

1
veben 2019-01-19 02:23.

Các constructorđược gọi khi "instanciates / cấu trúc" góc thành phần. Các ngOnInitphương pháp là một cái móc mà đại diện cho phần khởi tạo của vòng đời phần. Một thực hành tốt là chỉ sử dụng nó để tiêm dịch vụ :

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

Ngay cả khi có thể, bạn không nên làm một số "công việc" bên trong. Nếu bạn muốn khởi chạy một số hành động phải xảy ra khi "khởi tạo" thành phần, hãy sử dụng ngOnInit:

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

Hơn nữa, các hành động liên quan đến các thuộc tính đầu vào , đến từ một thành phần mẹ, không thể được thực hiện trong contructor. Chúng nên được đặt trong ngOnInitmethod hoặc hook khác. Điều này cũng tương tự đối với phần tử liên quan đến chế độ xem (DOM), ví dụ : các phần tử của chế độ xem :

@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
};
1
DeC 2019-10-29 02:18.

Constructor

Hàm khởi tạo đi kèm với mọi lớp, các hàm tạo không dành riêng cho Angular mà là các khái niệm bắt nguồn từ các thiết kế hướng đối tượng. Hàm tạo tạo một thể hiện của lớp thành phần.

OnInit

Các ngOnInitchức năng là một trong những phương pháp vòng đời một thành phần góc của. Các phương thức vòng đời (hoặc hook) trong các thành phần Angular cho phép bạn chạy một đoạn mã ở các giai đoạn khác nhau trong vòng đời của một thành phần. Không giống như phương thức khởi tạo, ngOnInitphương thức đến từ một giao diện Angular ( OnInit) mà thành phần cần triển khai để sử dụng phương thức này. Các ngOnInitphương pháp được gọi là một thời gian ngắn sau khi thành phần được tạo ra.

1
nirmal 2020-09-02 00:01.

Constructor là một phần của ES6 cũng là phiên bản mã đang sử dụng cú pháp es6 và bây giờ là es7, vì vậy bạn có thể sử dụng tính năng nâng cao mà bảng chữ cái sẽ biên dịch thành es5 / es4 (theo bạn định nghĩa) để cung cấp hỗ trợ cho trình duyệt cũ.

Trong khi ngOnInItlà móc vòng đời của góc cạnh. Nó được khởi tạo khi thành phần của bạn được khởi tạo. (Hãy coi nó là trạng thái được sinh ra từ bất kỳ cuộc sống mới nào)

Thật khôn ngoan khi sử dụng ngOnInItso sánh với hàm tạo, vì bạn có một móc vòng đời khác như ngOnDestory(Hãy coi nó như cái chết của bất kỳ sự sống nào). Tại đây, bạn có thể hủy đăng ký bất kỳ điều gì có thể quan sát được để ngăn chặn bất kỳ rò rỉ bộ nhớ nào.

Nếu có bất kỳ câu hỏi nào, hãy bình luận về câu trả lời này.

0
Zameer Ansari 2017-08-10 02:29.

constructor() được sử dụng để thực hiện tiêm phụ thuộc.

ngOnInit(), ngOnChanges()ngOnDestroy()vv là các phương pháp vòng đời. ngOnChanges()sẽ là lần đầu tiên được gọi, trước đó ngOnInit(), khi giá trị của thuộc tính bị ràng buộc thay đổi, nó sẽ KHÔNG được gọi nếu không có thay đổi. ngOnDestroy()được gọi khi thành phần bị loại bỏ. Để sử dụng nó, OnDestroycần phải được chỉnh sửa implementbởi lớp.

0
doudou 2019-03-13 22:33.

Tôi đã tìm thấy câu trả lời và tôi đã cố gắng dịch nó sang tiếng Anh: Câu hỏi này vẫn nảy sinh, ngay cả trong các cuộc phỏng vấn kỹ thuật. Trên thực tế, có một sự tương đồng lớn giữa cả hai, nhưng cũng có một số khác biệt.

  • Hàm tạo là một phần của ECMAScript. Mặt khác ngOnInit () là một khái niệm về góc.

  • Chúng ta có thể gọi các hàm tạo trong tất cả các lớp ngay cả khi chúng ta không sử dụng Angular

  • LifeCycle: Hàm tạo được gọi trước ngOnInt ()

  • Trong hàm tạo, chúng ta không thể gọi các phần tử HTML. Tuy nhiên, trong ngOnInit () chúng ta có thể.

  • Nói chung, các lệnh gọi dịch vụ trong ngOnInit () và không phải trong hàm tạo

    Nguồn: http://www.angular-tuto.com/Angular/Component#Diff

0
Przemek Struciński 2019-05-29 05:30.

Constructor là một hàm thực thi khi thành phần (hoặc lớp khác) được xây dựng.

ngOnInit là một hàm thuộc nhóm phương thức vòng đời thành phần và chúng được thực thi trong một thời điểm khác nhau của thành phần của chúng ta (đó là lý do tại sao đặt tên là vòng đời). Đây là danh sách tất cả chúng:

Hàm tạo sẽ được thực thi trước bất kỳ hàm vòng đời nào.

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Tất nhiên Luật sư mới của Harvey Weinstein là một người phụ nữ chỉ trích tôi

Tất nhiên Luật sư mới của Harvey Weinstein là một người phụ nữ chỉ trích tôi

Phiên tòa xét xử vụ tấn công tình dục bị trì hoãn nhiều của Harvey Weinstein dự kiến ​​sẽ bắt đầu lựa chọn bồi thẩm đoàn vào tháng 9, và với dự đoán, ông đã sắp xếp lại đội ngũ pháp lý của mình lần thứ ba. Có lẽ không thể tránh khỏi, các luật sư của anh ấy hiện bao gồm luật sư bào chữa Donna Rotunno, người nổi tiếng với việc đại diện cho những người đàn ông bị cáo buộc tấn công tình dục, đặt câu hỏi về phong trào MeToo nói chung và đã nói trong các cuộc phỏng vấn trước đây rằng giới tính của cô ấy cho phép cô ấy thoát khỏi "nọc độc" nhiều hơn khi kiểm tra chéo người tố cáo.

Cựu trợ lý của Harvey Weinstein nói rằng ông là 'kẻ thao túng bậc thầy'

Cựu trợ lý của Harvey Weinstein nói rằng ông là 'kẻ thao túng bậc thầy'

Trong một cuộc phỏng vấn với BBC News, trợ lý cũ của Harvey Weinstein, Zelda Perkins, nói rõ thực tế của việc chống lại ông trùm Hollywood. Cô ấy nói, về cơ bản là không thể.

Không có người chơi nào trên bầu trời của họ có cuộc chiến đầu tiên của họ và nó đã giết chết hoàn toàn một nền văn minh

Không có người chơi nào trên bầu trời của họ có cuộc chiến đầu tiên của họ và nó đã giết chết hoàn toàn một nền văn minh

Nguồn ảnh: AndyKrycek6 Những người hâm mộ No Man's Sky không thể chơi với nhau một cách chính xác, nhưng họ vẫn thích đến với nhau để ăn mừng cộng đồng của họ. Bằng cách nào đó, một kỳ nghỉ mới do người chơi tạo ra đã trở thành một câu chuyện về xung đột, phản bội và sự biến mất của cả một nền văn minh.

Cựu Giám đốc Thanh niên Bắc Carolina NAACP buộc tội Giám sát viên về hành vi quấy rối tình dục và cưỡng bức như thế nào Quốc gia xử lý yêu cầu của cô ấy

Cựu Giám đốc Thanh niên Bắc Carolina NAACP buộc tội Giám sát viên về hành vi quấy rối tình dục và cưỡng bức như thế nào Quốc gia xử lý yêu cầu của cô ấy

Jazmyne Childs đã khóc trong một cuộc họp báo vào ngày 25 tháng 9 năm 2019, khi cô ấy mô tả về hành vi quấy rối tình dục mà cô ấy nói rằng cô ấy đã phải chịu đựng khi làm việc cho phân hội Bắc Carolina của NAACP, ở Raleigh, N.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Tôi viết như thế nào

Tôi viết như thế nào

Đối với tôi, mọi thứ là về dòng đầu tiên đó và nó sẽ đưa bạn đến đâu. Một số nhà văn bị điều khiển bởi cốt truyện, sự sắp xếp tinh tế của các quân cờ, trong khi những người khác bị lôi cuốn bởi một nhân vật và khả năng thực hiện một cuộc hành trình với một người bạn hư cấu mới.

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Language