@Directive so với @Component trong Angular

463
Prasanjit Dey 2015-09-21 04:03.

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

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

8 answers

571
jaker 2015-09-21 06:39.

@Component yêu cầu chế độ xem trong khi @Directive thì không.

Chỉ thị

Tôi ví @Directive với một chỉ thị Angular 1.0 với tùy chọnrestrict: 'A' (Các chỉ thị không bị giới hạn trong việc sử dụng thuộc tính.) Các chỉ thị thêm hành vi vào một phần tử DOM hiện có hoặc một 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 chỉ thị sẽ 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ào 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 chế độ xem của chính nó (hệ thống phân cấp các phần tử DOM) với hành vi đí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 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ào sẽ được sử dụng như vậy:

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

ContactCardlà một thành phần giao diện người dùng có thể tái sử dụng mà chúng tôi 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. Về cơ bản, chúng tạo nên các khối xây dựng giao diện người dùng 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 phần tử DOM có thể sử dụng lại của giao diện người dùng với hành vi tùy chỉnh. Viết chỉ thị 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:

81
virender 2016-01-09 00:20.

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 chỉ thị sử dụng DOM bóng để 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 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 cho mỗi phần tử DOM.
  5. @View decorator hoặc templateurl mẫu là bắt buộc trong thành phần.

Chỉ thị

  1. Để đăng ký các 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 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ể 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 Chế độ xem.

Nguồn:

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

66
yusuf tezel 2016-04-22 02:06.

Một thành phần là một chỉ thị-với-một khuôn 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 khuôn mẫu.

22
Alireza 2017-04-16 16:16.

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 tôi xây dựng và chỉ định các phần tử và logic trên trang, thông qua cả các phần tử và thuộc tính tùy chỉnh bổ sung 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 đó sẽ làm 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 — chỉ thị 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. Các 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 một 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 bổ sung chức năng cho các phần tửthành phần .

Hãy xem mẫu bên dưới 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à phần tử HTML với việc 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ư sau:

<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 tạo được gọi và hiển thị.

7
Evgeniy Malyutin 2018-03-30 18:51.

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ù vậy, một Chỉ thị có thể có @Input@Outputcác thuộc tính và bạn có thể chèn và thao tác các thành phần máy chủ ChangeDetectorReftừ nó. Vì vậy, hãy sử dụng Thành phần khi bạn cần kiểm soát chi tiết cây phát hiện thay đổi của mình.

6
Sachila Ranawaka 2018-07-04 02:49.

Trong ngữ 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 nó sẽ xử lý đầu vào, tức là thay đổi một số hành vi.

“Các chỉ thị cho phép bạn đính kèm hành vi vào các phần tử 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 Doc,

“Các thành phần góc là một tập hợp con của các chỉ thị. Không giống như các chỉ thị, các thành phần luôn có một khuôn 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 khuôn mẫu ”.

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ể coi Thành phần Web là các tiện ích con giao diện người dùng có thể tái sử dụng được tạo bằng công nghệ Web mở.

  • Vì vậy, trong chỉ thị tóm tắt 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 kiểu Cấu trúc, Thuộc tính và Thành phần.
  • 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 tái sử dụng AKA - các phần 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.
2
Akshay Rajput 2018-12-20 01:38.

Nếu bạn tham khảo các tài liệu góc cạnh chính thức

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

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

  1. Các thành phần — chỉ thị 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ụ: * ngIf
  3. Các 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 một chỉ thị khác. ví dụ: [ngClass].

Khi Ứng dụng phát triển, chúng tôi thấy khó khăn trong việc duy trì tất cả các mã này. Vì 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.

2
Przemek Struciński 2019-08-30 21:02.

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 một ứ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 phải 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 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ể hiển thị mẫu AppTrainingComponent với 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 giao diện hoặc hành vi của phần tử 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 . Giả sử chúng 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 chúng).

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ị

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.

Đây là Tổng thống Trump đe dọa 'trợ cấp' xe điện của GM vì đóng cửa nhà máy

Đây là Tổng thống Trump đe dọa 'trợ cấp' xe điện của GM vì đóng cửa nhà máy

Trump và Giám đốc điều hành GM Mary Barra vào năm 2017. Kể từ khi tin tức nổ ra ngày hôm qua rằng General Motors đang cắt giảm việc làm ở Bắc Mỹ để chuẩn bị cho tương lai điện / xe tự hành / khủng khiếp có thể xảy ra của chúng tôi, gần như tất cả mọi người đã tự hỏi: Tổng thống Trump, người đã vận động tranh cử trên một nền tảng sẽ như thế nào của việc mang lại và duy trì việc làm ô tô của Mỹ, phải nói gì về điều này? Bây giờ chúng ta biết.

Bản vá lỗi tiếp theo của Fallout 76 sẽ mang lại một số bản sửa lỗi cần thiết

Bản vá lỗi tiếp theo của Fallout 76 sẽ mang lại một số bản sửa lỗi cần thiết

Bethesda cho biết ngày hôm nay trên Reddit, Fallout 76 sẽ có một bản vá lớn khác vào ngày 4 tháng 12, sẽ bắt đầu cố gắng khắc phục một số vấn đề lớn hơn của trò chơi. Ngoài ra, công ty cho biết họ có kế hoạch giao tiếp nhiều hơn trong tương lai về những gì nhóm Fallout 76 đang làm việc và khi nào các bản cập nhật mới cho trò chơi sẽ ra mắt.

Mạng lưới bệnh viện Công giáo sẽ không cho phép nhân viên phá thai tại phòng khám ngoài giờ làm việc

Mạng lưới bệnh viện Công giáo sẽ không cho phép nhân viên phá thai tại phòng khám ngoài giờ làm việc

Bạn có biết rằng một trong sáu bệnh nhân ở bệnh viện ở Hoa Kỳ được điều trị tại một cơ sở Công giáo? Và bạn có biết rằng quyền sở hữu của Công giáo hạn chế sâu sắc việc thiết lập các thủ tục y tế có thể được thực hiện trong các bệnh viện này, rõ ràng nhất là khi nói đến chăm sóc sức khỏe sinh sản? Bây giờ NPR báo cáo rằng sự gia tăng của các bệnh viện thuộc Công giáo đang gây khó khăn hơn cho các bác sĩ — những người bị cấm bởi các quy định do Hoa Kỳ viết.

Khói từ đám cháy rừng ở California đã đến tận thành phố New York

Khói từ đám cháy rừng ở California đã đến tận thành phố New York

Đường chân trời San Francisco bị che khuất bởi khói và khói mù do cháy rừng phía sau Đảo Alcatraz, Thứ Tư, ngày 14 tháng 11 năm 2018, ở San Francisco.

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 +"

Đườ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.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language