Angular 2 - Dependency Injection
Chèn phụ thuộc là khả năng thêm chức năng của các thành phần trong thời gian chạy. Hãy xem một ví dụ và các bước được sử dụng để thực hiện việc tiêm phụ thuộc.
Step 1- Tạo một lớp riêng có trình trang trí có thể tiêm. Trình trang trí có thể tiêm cho phép chức năng của lớp này được đưa vào và sử dụng trong bất kỳ mô-đun Angular JS nào.
@Injectable()
export class classname {
}
Step 2 - Tiếp theo trong mô-đun appComponent của bạn hoặc mô-đun mà bạn muốn sử dụng dịch vụ, bạn cần xác định nó là nhà cung cấp trong trình trang trí @Component.
@Component ({
providers : [classname]
})
Hãy xem một ví dụ về cách đạt được điều này.
Step 1 - Tạo một ts tệp cho dịch vụ có tên app.service.ts.
Step 2 - Đặt đoạn mã sau vào tệp đã tạo ở trên.
import {
Injectable
} from '@angular/core';
@Injectable()
export class appService {
getApp(): string {
return "Hello world";
}
}
Những điểm sau đây cần lưu ý về chương trình trên.
Bộ trang trí Injectable được nhập từ mô-đun góc / lõi.
Chúng tôi đang tạo một lớp có tên là appService được trang trí bằng trình trang trí Injectable.
Chúng tôi đang tạo một hàm đơn giản được gọi là getApp để trả về một chuỗi đơn giản có tên là “Hello world”.
Step 3 - Trong tệp app.component.ts, hãy đặt đoạn mã sau.
import {
Component
} from '@angular/core';
import {
appService
} from './app.service';
@Component({
selector: 'my-app',
template: '<div>{{value}}</div>',
providers: [appService]
})
export class AppComponent {
value: string = "";
constructor(private _appService: appService) { }
ngOnInit(): void {
this.value = this._appService.getApp();
}
}
Những điểm sau đây cần lưu ý về chương trình trên.
Đầu tiên, chúng tôi đang nhập mô-đun appService của mình vào mô-đun appComponent.
Sau đó, chúng tôi đăng ký dịch vụ với tư cách là nhà cung cấp trong mô-đun này.
Trong hàm tạo, chúng tôi xác định một biến có tên là _appService của kiểu appService để nó có thể được gọi ở bất kỳ đâu trong mô-đun appComponent.
Ví dụ, trong vòng đời ngOnInit, chúng tôi đã gọi hàm getApp của dịch vụ và gán đầu ra cho thuộc tính giá trị của lớp AppComponent.
Lưu tất cả các thay đổi mã và làm mới trình duyệt, bạn sẽ nhận được kết quả sau.