typescript - @Directive và @Component trong Angular

Sự khác biệt giữa @Component và @Directive trong Angular là gì? Cả hai dường như thực hiện cùng một nhiệm vụ và có cùng các thuộc tính.

Các trường hợp sử dụng là gì và khi nào nên ưu tiên cái này hơn cái kia?

Câu trả lời #1

Một @Component yêu cầu có view trong khi một @Directive thì không.

Chỉ thị

Tôi so sánh một @Directive với một directive của Angular 1.0 với tùy chọn restrict: 'A' (Directive không bị giới hạn chỉ sử dụng thuộc tính.) Directive thêm hành vi cho một phần tử DOM hiện có hoặc một instance component hiện có. Một ví dụ về trường hợp sử dụng của directive là ghi lại một lần nhấp vào một phần tử.

import {Directive} from '@angular/core';

@Directive({
    selector: "[logOnClick]",
    hostListeners: {
        'click': 'onClick()',
    },
})
class LogOnClick {
    constructor() {}
    onClick() { console.log('Element clicked!'); }
}

Cái này sẽ được sử dụng như sau:

<button logOnClick>I log when clicked!</button>

Các thành phần

Một thành phần, thay vì thêm/thay đổi hành vi, thực sự tạo ra chính giao diện của nó (cấu trúc các phần tử DOM) với hành vi kèm theo. Một ví dụ về trường hợp sử dụng cho điều này có thể là một thành phần thẻ liên hệ:

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

@Component({
  selector: 'contact-card',
  template: `
    <div>
      <h1>{{name}}</h1>
      <p>{{city}}</p>
    </div>
  `
})
class ContactCard {
  @Input() name: string
  @Input() city: string
  constructor() {}
}

Cái này sẽ được sử dụng như sau:

<contact-card [name]="'foo'" [city]="'bar'"></contact-card>

ContactCard là một thành phần giao diện người dùng có thể tái sử dụng mà chúng ta có thể sử dụng ở bất cứ đâu trong ứng dụng của mình, thậm chí bên trong các thành phần khác. Những thành phần này cơ bản tạo nên các khối xây dựng giao diện của ứng dụng của chúng ta.

Tóm lại

Viết một component khi bạn muốn tạo một tập hợp các phần tử DOM của giao diện người dùng có thể tái sử dụng với hành vi tùy chỉnh. Viết một directive khi bạn muốn viết hành vi có thể tái sử dụng để bổ sung cho các phần tử DOM hiện có.

Nguồn:

• Tài liệu @Directive
• Tài liệu @Component
• Bài viết blog hữu ích

Câu trả lời #2

Thành phần

1. Để đăng ký một thành phần, chúng ta sử dụng chú thích siêu dữ liệu @Component.
2. Component là một chỉ thị sử dụng shadow DOM để tạo hành vi trực quan được bao đóng gọi là component. Component thường được sử dụng để tạo các tiện ích giao diện người dùng.
3. Component được sử dụng để chia nhỏ ứng dụng thành các thành phần nhỏ hơn.
4. Chỉ có thể có một thành phần xuất hiện trên mỗi phần tử DOM.
5. Trang trí @View hoặc templateurl template là bắt buộc trong component.

Chỉ thị

1. Để đăng ký các chỉ thị, chúng tôi sử dụng chú thích siêu dữ liệu @Directive.
2. Directive được sử dụng để thêm hành vi vào một phần tử DOM hiện có.
3. Chỉ thị được sử dụng để thiết kế các thành phần có thể tái sử dụng.
4. Nhiều chỉ thị có thể được sử dụng cho mỗi phần tử DOM.
5. Chỉ thị không sử dụng View.

Nguồn:

https://www.devdiscuss.com/difference-between-component-and-directive-in-angular-2/

Câu trả lời số 3

Một component là một directive kèm theo template và decorator @Component thực sự là một decorator @Directive được mở rộng với các tính năng hướng tới template.

Câu trả lời #4

Trong Angular 2 trở lên, "mọi thứ đều là một thành phần." Thành phần là cách chính chúng ta xây dựng và xác định các phần tử và logic trên trang, thông qua cả các phần tử tùy chỉnh và các thuộc tính thêm chức năng vào các thành phần hiện có của chúng ta.

http://learnangular2.com/components/

Nhưng các chỉ thị làm gì trong Angular2+?

Các chỉ thị thuộc tính gắn hành vi vào các phần tử.

Có ba loại chỉ thị trong Angular:

1. Các thành phần—các chỉ thị với một mẫu.
2. Các chỉ thị cấu trúc—thay đổi bố cục DOM bằng cách thêm và loại bỏ các phần tử DOM.
3. Chỉ thị thuộc tính—thay đổi giao diện hoặc hành vi của một phần tử, thành phần, hoặc chỉ thị khác.

https://angular.io/docs/ts/latest/guide/attribute-directives.html

Vì vậy, những gì đang xảy ra trong Angular2 trở lên là Directives là các thuộc tính thêm chức năng vào elements và components.

Hãy xem mẫu dưới đây từ Angular.io:

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

Vậy điều nó làm là, nó sẽ mở rộng các thành phần và phần tử HTML của bạn bằng cách thêm nền màu vàng và bạn có thể sử dụng nó như bên dưới:

<p myHighlight>Highlight me!</p>

Nhưng các thành phần sẽ tạo ra các phần tử đầy đủ với tất cả các chức năng như dưới đây:

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

@Component({
  selector: 'my-component',
  template: `
    <div>Hello my name is {{name}}. 
      <button (click)="sayMyName()">Say my name</button>
    </div>
   `
})
export class MyComponent {
  name: string;
  constructor() {
    this.name = 'Alireza'
  }
  sayMyName() {
    console.log('My name is', this.name)
  }
}

và bạn có thể sử dụng nó như dưới đây:

<my-component></my-component>

Khi chúng ta sử dụng thẻ trong HTML, thành phần này sẽ được tạo và hàm khởi tạo sẽ được gọi và hiển thị.

Câu trả lời #5

@Component chỉ là một lớp con của @Directive. Trước khi đi sâu vào điều này, chúng ta phải hiểu @Directive là gì...

@Directive là một decorator được sử dụng để hướng dẫn DOM thêm một phần tử mới hoặc xóa hoặc sửa đổi một phần tử hiện có. Vì vậy, mỗi khi Angular gặp bất kỳ decorator nào, nó sẽ xử lý chúng vào thời gian chạy và sửa đổi DOM theo đó.

Chúng ta có thể tạo các Chỉ thị của mình bằng cách sử dụng @Directive như được hiển thị bên dưới

@Directive({
  selector: '[demoButtonColor]'
})
export class DemoButtonColorDirective {
  constructor(private elementRef: ElementRef) { };
  ngOnInit() {
    this.elementRef.nativeElement.style.backgroundColor = 'red';
  }
}

Cách sử dụng trong HTML

<button demoButtonColor>RED BUTTON</button>

Bây giờ hãy xem @Component decorator là gì

@Component là một lớp con của @Directive với một chức năng bổ sung. Sử dụng @Component, chúng ta có thể tạo mẫu HTML của mình, mẫu này có thể được chèn vào DOM khi chạy.

@Component({
  selector: 'demo-color',
  template: '<h1>Hello There!</h1>'
})
class DemoColorComponent {}

Chúng ta có thể tái sử dụng nó trong bất kỳ thành phần nào khác như được hiển thị dưới đây

<div>
  <demo-color></demo-color>
</div>

Tóm lại, hãy sử dụng @Directive để tạo một directive tùy chỉnh có thể được sử dụng để sửa đổi phần tử hoặc cấu trúc của DOM. Và sử dụng @Component, nếu bạn muốn tạo các thành phần giao diện người dùng có thể tái sử dụng với hành vi tùy chỉnh.

Câu trả lời số 6

Trong bối cảnh lập trình, các chỉ thị cung cấp hướng dẫn cho trình biên dịch để thay đổi cách mà nó sẽ xử lý đầu vào, tức là thay đổi một số hành vi.

“Chỉ thị cho phép bạn gắn hành vi vào các phần tử trong DOM.”

các chỉ thị được chia thành 3 loại:

• Thuộc tính
• Cấu trúc
• Thành phần

Vâng, trong Angular 2, Components là một loại Directive. Theo tài liệu,

Các thành phần Angular là một tập con của các chỉ thị. Khác với các chỉ thị, các thành phần luôn có một mẫu và chỉ một thành phần có thể được khởi tạo cho mỗi phần tử trong một mẫu.

Các thành phần Angular 2 là một thực hiện của khái niệm Web Component. Web Components bao gồm nhiều công nghệ riêng biệt. Bạn có thể nghĩ về Web Components như các tiện ích giao diện người dùng có thể tái sử dụng được tạo ra bằng công nghệ Web mở.

• Tóm lại, directives là cơ chế mà chúng ta gắn hành vi vào các phần tử trong DOM, bao gồm các loại: Cấu trúc, Thuộc tính và Thành phần.
• Các thành phần là loại chỉ thị cụ thể cho phép chúng ta sử dụng tính năng thành phần web hay còn gọi là khả năng tái sử dụng - các phần tử đóng gói, có thể tái sử dụng có sẵn trong toàn bộ ứng dụng của chúng ta.

Câu trả lời số 7

Thành phần

Các thành phần là khối xây dựng giao diện người dùng cơ bản nhất của ứng dụng Angular. Một ứng dụng Angular chứa một cây các thành phần Angular. Ứng dụng của chúng ta trong Angular được xây dựng trên một cây thành phần. Mỗi thành phần nên có mẫu, kiểu dáng, vòng đời, bộ chọn, v.v. Vì vậy, mỗi thành phần đều có cấu trúc riêng của nó. Bạn có thể coi chúng như một ứng dụng web nhỏ độc lập với mẫu và logic riêng của nó, và có khả năng giao tiếp và được sử dụng cùng với các thành phần khác.

Tệp .ts mẫu cho Component:

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

@Component({
    // component attributes
    selector: 'app-training',
    templateUrl: './app-training.component.html',
    styleUrls: ['./app-training.component.less']
})

export class AppTrainingComponent {
    title = 'my-app-training';
}

và giao diện mẫu ./app.component.html của nó:

Hello {{title}}

Sau đó bạn có thể kết xuất template AppTrainingComponent với logic của nó trong các component khác (sau khi thêm nó vào module)

<div>
   <app-training></app-training>
</div>

và kết quả sẽ là

<div>
   my-app-training
</div>

khi AppTrainingComponent được hiển thị ở đây

Xem thêm về Các thành phần

Chỉ thị

Directive thay đổi giao diện hoặc hành vi của một phần tử DOM hiện có. Ví dụ [ngStyle] là một directive. Các directive có thể mở rộng các component (có thể được sử dụng bên trong chúng) nhưng chúng không xây dựng toàn bộ ứng dụng. Giả sử chúng chỉ hỗ trợ các component. Chúng không có template riêng (nhưng tất nhiên, bạn có thể thao túng template với chúng).

Mẫu hướng dẫn:

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @Input('appHighlight') highlightColor: string;

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'red');
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Và cách sử dụng của nó:

<p [appHighlight]="color" [otherPar]="someValue">Highlight me!</p>

Xem thêm về các chỉ thị