@Directive vs @Component trong Angular

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

Các trường hợp sử dụng và khi nào thích cái này hơn cái khác?

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

Chỉ thị

Tôi ví von @Directive với chỉ thị Angular 1.0 với tùy chọnrestrict: 'A' (Chỉ thị không giới hạn sử dụng thuộc tính.) Chỉ thị thêm hành vi vào thành phần DOM hiện có hoặc phiên bản thành phần hiện có. Một trường hợp sử dụng ví dụ cho một lệnh sẽ là ghi nhật ký nhấp chuột 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!'); }
}

Mà sẽ được sử dụng như vậy:

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

Các thành phần

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

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

Mà sẽ được sử dụng như vậy:

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

ContactCardlà một thành phần UI có thể tái sử dụng mà chúng ta có thể sử dụng ở bất kỳ đâu trong ứng dụng của mình, ngay cả trong các thành phần khác. Chúng cơ bản tạo nên các khối xây dựng UI của các ứng dụng của chúng tôi.

Tóm tắt

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

Nguồn:

• Tài liệu hướng dẫn @
• Tài liệu @Component
• Bài viết hữu ích

Các thành phần

1. Để đăng ký một thành phần, chúng tôi sử dụng @Componentchú thích siêu dữ liệu.
2. Thành phần là một lệnh sử dụng bóng DOM để tạo hành vi trực quan được đóng gói được gọi là các thành phần. Các thành phần thường được sử dụng để tạo các widget UI.
3. Thành phần được sử dụng để chia ứng dụng thành các thành phần nhỏ hơn.
4. Chỉ có một thành phần có thể có mặt trên mỗi phần tử DOM.
5. @View trang trí hoặc mẫu templateurl là bắt buộc trong thành phần.

Chỉ thị

1. Để đăng ký chỉ thị, chúng tôi sử dụng @Directivechú thích siêu dữ liệu.
2. Chỉ thị được sử dụng để thêm hành vi vào thành phần DOM hiện có.
3. Chỉ thị được sử dụng để thiết kế các thành phần có thể sử dụng lại.
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 Xem.

Nguồn:

http://www.codeandyou.com/2016/01/difference-b between-component-and-default-in -Angular2.html

Một thành phần là một chỉ thị với mẫu và trình @Componenttrang trí thực sự là một trình @Directivetrang trí được mở rộng với các tính năng hướng mẫu.

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

http://learnangular2.com/components/

Nhưng những chỉ thị nào sau đó trong Angular2 +?

Chỉ thị thuộc tính gắn hành vi với các yếu tố.

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

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

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

Vì vậy, những gì xảy ra trong Angular2 trở lên là Chỉ thị là các thuộc tính bổ sung chức năng cho các thành phần và thành phần .

Nhìn vào 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ì vậy, những gì nó làm, nó sẽ mở rộng cho bạn các thành phần và các thành phần HTML bằng cách thêm nền màu vàng và bạn có thể sử dụng nó như dưới đây:

<p myHighlight>Highlight me!</p>

Nhưng các thành phần sẽ tạo ra các yếu 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 tôi sử dụng thẻ trong HTML, thành phần này sẽ được tạo và hàm tạo được gọi và kết xuất.

Phát hiện thay đổi

Chỉ @Componentcó thể là một nút trong cây phát hiện thay đổi. Điều này có nghĩa là bạn không thể đặt ChangeDetectionStrategy.OnPushtrong a @Directive. Mặc dù thực tế này, một Chỉ thị có thể có @Inputvà @Outputcác thuộc tính và bạn có thể tiêm và thao tác thành phần máy chủ ChangeDetectorReftừ nó. Vì vậy, sử dụng Thành phần khi bạn cần một điều khiển chi tiết trên cây phát hiện thay đổi của bạn.

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

Các Chỉ thị của Cho phép bạn đính kèm hành vi với các thành phần trong DOM.

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

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

Có, trong Angular 2, Thành phần là một loại Chỉ thị. Theo bác sĩ,

Các thành phần Angular là một tập hợp con của chỉ thị. Không giống như 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 triển khai của khái niệm Thành phần Web . Thành phần Web bao gồm một số công nghệ riêng biệt. Bạn có thể nghĩ về các Thành phần Web như các widget giao diện người dùng có thể sử dụng lại được tạo bằng công nghệ Web mở.

• Vì vậy, trong các chỉ thị tóm tắt Cơ chế mà chúng tôi gắn hành vi với các thành phần 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 tôi sử dụng chức năng thành phần web Khả năng sử dụng lại AKA - các yếu tố được đóng gói, có thể tái sử dụng có sẵn trong ứng dụng của chúng tôi.

Nếu bạn giới thiệu các tài liệu góc chính thức

https://angular.io/guide/attribute-directives

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

1. Thành phần chỉ thị thành phần với một mẫu.
2. Chỉ thị cấu trúc, thay đổi bố cục DOM bằng cách thêm và xóa các phần tử DOM. ví dụ * ngNếu
3. Chỉ thị thuộc tính. Thay đổi diện mạo hoặc hành vi của một thành phần, thành phần hoặc chỉ thị khác. ví dụ: [ngClass].

Khi Ứng dụng phát triển, chúng tôi gặp khó khăn trong việc duy trì tất cả các mã này. Đối với mục đích tái sử dụng, chúng tôi tách logic của chúng tôi trong các thành phần thông minh và các thành phần câm và chúng tôi sử dụng các chỉ thị (cấu trúc hoặc thuộc tính) để thực hiện các thay đổi trong DOM.

Các 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 tôi trong Angular được xây dựng trên 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 của nó Bạn có thể coi chúng như một ứng dụng web nhỏ độc lập với khuôn mẫu và logic riêng và khả năng giao tiếp và được sử dụng cùng với nhau các thành phần.

Tệp .ts mẫu cho Thành phần:

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à chế độ xem mẫu ./app.component.html của nó:

Hello {{title}}

Sau đó, bạn có thể kết xuất mẫu AppTrainingComponent bằng logic của nó trong các thành phần khác (sau khi thêm nó vào mô-đun)

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

và kết quả sẽ là

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

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

Xem thêm về Thành phần

Chỉ thị

Chỉ thị thay đổi diện mạo hoặc hành vi của một thành phần DOM hiện có. Ví dụ [ngStyle] là một chỉ thị. Các chỉ thị có thể mở rộng các thành phần (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 . Hãy nói rằng họ chỉ hỗ trợ các thành phần. Họ không có mẫu riêng (nhưng tất nhiên, bạn có thể thao tác mẫu với họ).

Chỉ thị mẫu:

@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ề chỉ thị