Inject component cha đến component con

Angular application là một component tree có dạng như sau:

Angular hỗ trợ Dependency Injection (DI) tới mức độ của từng Component, cho phép chúng ta inject một Component cha vào một Component con. Điều này rất hữu ích khi chúng ta xây dựng một tính năng như Tabs để quản lý nhiều tab khác nhau.

Giả sử chúng ta có hai Components: TabGroupComponent để quản lý các tab và TabPanelComponent tương ứng với từng tab.

<app-tab-group>
  <app-tab-panel title="Tab 1">nội dung tab 1</app-tab-panel>
  <app-tab-panel title="Tab 2">nội dung tab 2</app-tab-panel>
  <app-tab-panel title="Tab 3">nội dung tab 3</app-tab-panel>
  <!-- Thêm nhiều tab khác -->
</app-tab-group>

Mỗi khi thêm hoặc xoá tab panel, tab-group cần biết để cập nhật giao diện và xử lý sự kiện khi chọn tab.

Trong Angular, chúng ta có các lifecycle method như OnInit và OnDestroy cho phép TabPanelComponent tương tác với TabGroupComponent vào thời điểm thích hợp.

Thay vì sử dụng EventEmitter để thông báo cho Component cha về các thay đổi, chúng ta cũng có thể inject Component cha vào Component con và thực hiện các hành động tương ứng.

Ví dụ, tab-group.component.ts:

@Component({
  selector: "app-tab-group",
  templateUrl: "./tab-group.component.html",
  styleUrls: ["./tab-group.component.css"],
})
export class TabGroupComponent implements OnInit {
  // ... (phần khai báo và các method khác)
}

@Component({
  selector: "app-tab-panel",
  template: `
    <ng-template>
      <ng-content></ng-content>
    </ng-template>
  `,
  styles: [""],
})
export class TabPanelComponent implements OnInit, OnDestroy {
  @Input() title: string;
  @ViewChild(TemplateRef, { static: true }) panelBody: TemplateRef<unknown>;
  constructor(private tabGroup: TabGroupComponent) {}
  ngOnInit() {
    this.tabGroup.addTabPanel(this);
  }
  ngOnDestroy() {
    this.tabGroup.removeTabPanel(this);
  }
}

Ở đây, TabPanelComponent inject TabGroupComponent và gọi các phương thức addTabPanel và removeTabPanel tương ứng khi được tạo và sắp bị destroy. Điều này giúp TabGroupComponent biết được và quản lý các tab panel hiện có trong hệ thống Tabs.

Provide một tab group khác có cùng APIs

Đây là một ví dụ thú vị về cách Angular hỗ trợ việc tạo ra các thành phần có khả năng tái sử dụng một cách linh hoạt hơn thông qua Dependency Injection (DI). Nếu bạn muốn tạo một Tab Group có giao diện khác hoặc theo design system (như Bootstrap, Ant Design, vv.) mà ứng dụng của bạn đang sử dụng, DI có thể giúp bạn làm điều này một cách dễ dàng.

Ví dụ, chúng ta có một Tab Group cơ bản và muốn tạo một phiên bản khác với giao diện riêng:

Trong bs-tab-group.component.ts:

@Component({
  selector: "app-bs-tab-group",
  templateUrl: "./bs-tab-group.component.html",
  styleUrls: ["./bs-tab-group.component.css"],
  providers: [
    {
      provide: TabGroupComponent,
      useExisting: BsTabGroupComponent,
    },
  ],
})
export class BsTabGroupComponent extends TabGroupComponent {}

Ở đây, BsTabGroupComponent là một phiên bản mới của TabGroupComponent với giao diện được thiết kế theo design system (ví dụ: Bootstrap). Bằng cách cung cấp một provider thông qua DI, Angular hiểu rằng khi một TabGroupComponent được yêu cầu, nó sẽ sử dụng BsTabGroupComponent thay vì TabGroupComponent.

Template cho bs-tab-group.component.html:

<ul class="nav nav-tabs" role="tablist">
  <!-- UI cho tab -->
</ul>
<div class="tab-content">
  <!-- Nội dung tab -->
</div>

Khi sử dụng:

<app-bs-tab-group>
  <app-tab-panel title="Tab 1">nội dung tab 1</app-tab-panel>
  <app-tab-panel title="Tab 2">nội dung tab 2</app-tab-panel>
  <app-tab-panel title="Tab 3">nội dung tab 3</app-tab-panel>
</app-bs-tab-group>

Bằng cách này, bạn có thể tạo các phiên bản của cùng một thành phần với giao diện hoặc tính năng khác nhau mà không cần viết lại hoặc thay đổi code nguồn. Công nghệ này, thực sự, được sử dụng rộng rãi trong Angular Framework chính, ví dụ như với phần Form như ngForm, ngModelGroup, v.v.

Forward Reference

Forward reference là một kỹ thuật trong TypeScript giúp xử lý việc refer đến một class trước khi nó được khai báo. Trong ES2015/TypeScript, khi một class chưa được khai báo mà đã được refer đến, có thể gây lỗi hoặc trả về undefined khi transpile sang ES5 với var keyword.

Trong Angular, khi chúng ta cần sử dụng một class trước khi nó được khai báo, chẳng hạn như khi ta muốn sử dụng một class trong phần provider của decorator @Component, chúng ta có thể gặp phải lỗi “used before its declaration”.

Để giải quyết vấn đề này, chúng ta sử dụng forwardRef. Ví dụ, khi chúng ta muốn sử dụng một class trong phần provider:

const BsTabGroupProvider = {
  provide: TabGroupComponent,
  useExisting: forwardRef(() => BsTabGroupComponent),
};

@Component({
  selector: "app-bs-tab-group",
  templateUrl: "./bs-tab-group.component.html",
  styleUrls: ["./bs-tab-group.component.css"],
  providers: [BsTabGroupProvider],
})
export class BsTabGroupComponent extends TabGroupComponent {}

Việc sử dụng forwardRef giúp tạo một reference được thực thi sau khi class được khai báo, giúp giải quyết lỗi “used before its declaration”.

Trong Angular, việc sử dụng trực tiếp trong decorator không gây ra lỗi này bởi vì class decorator sẽ được gọi sau khi class được tạo xong. Điều này có thể được tưởng tượng tương đương với việc gọi một function như sau:

@SomeDecorator
class SomeClass {}

// Tương đương với việc gọi một function
let SomeClass = class SomeClass {};
SomeClass = SomeDecorator(SomeClass);

Kỹ thuật này giúp chúng ta xử lý việc sử dụng các references trước khi chúng được khai báo, đồng thời cho phép chúng ta tận dụng các thành phần của Angular một cách linh hoạt.

Provider syntax

Có một số cách để cung cấp provider trong Angular, mỗi cách có cú pháp khác nhau như sau:

Cú pháp useClass:

@NgModule({
  providers: [SomeClass]
})
// Tương đương với
@NgModule({
  providers: [{ provide: SomeClass, useClass: SomeClass }]
})

Cú pháp useExisting:

@Component({
  providers: [
    {
      provide: SomeClass,
      useExisting: OtherClass
    }
  ]
})

Cú pháp useFactory:

@Component({
  providers: [
    {
      provide: SomeClass,
      useFactory: function() {
        return aValue;
      }
    }
  ]
})

Cú pháp useValue:

@Component({
  providers: [
    {
      provide: SomeToken,
      useValue: someValue
    }
  ]
})

Mỗi cú pháp có mục tiêu và cách thức hoạt động khác nhau. Ví dụ, useClass sử dụng class đã được khai báo, useExisting sử dụng một class tồn tại, useFactory sử dụng một function factory để tạo ra một instance, và useValue sử dụng một giá trị cụ thể.

Điều quan trọng là hiểu rõ mỗi cách cung cấp provider để sử dụng đúng cách trong việc quản lý dependencies trong ứng dụng Angular của bạn.