2016-02-06 40 views
7

Thay đổi đối tượng địa lý lớn trong Angular 1.5 nằm xung quanh sự hỗ trợ của components.Các thành phần và chỉ thị trong góc 1.5

component('myComponent', { 
    template: '<h1>Hello {{ $ctrl.getFullName() }}</h1>', 
    bindings: { firstName: '<', lastName: '<' }, 
    controller: function() { 
    this.getFullName = function() { 
     return this.firstName + ' ' + this.lastName; 
    }; 
    } 
}); 

Trong khi điều này hoàn toàn tốt, tôi không chắc điều này khác với chỉ thị. Lợi ích của việc sử dụng components so với chỉ thị tùy chỉnh truyền thống là gì? Và các thành phần trong Angular 1.5 và Angular 2 có giống nhau không?

Trả lời

3

.component bây giờ là cách viết mã ưa thích hơn vì nó ưu tiên thực hành tốt và cung cấp cho nhà phát triển khả năng viết mã như trong góc 2 (tương tự với Cấu phần Web). Về cơ bản, khi bạn viết mã bằng cách sử dụng component, nâng cấp lên góc 2 sẽ dễ dàng hơn. Các chức năng vẫn gần như giống nhau. Bạn nên sử dụng .componentluôn khi có thể.

Changes (trích)

  • thành phần được khai báo sử dụng đối tượng thay vì chức năng
  • đơn giản hóa phạm vi cách ly sử dụng binding tài sản
  • thành phần luôn ở bên cạnh phạm vi cô lập
  • một số thói quen xấu sẽ không có thể
  • đơn giản, dễ hiểu cấu hình
  • móc vòng đời: ($onInit(), $onChanges(changesObj), $doCheck(), $onDestroy(), $postLink())

tạo ảnh vui nhộn bài viết là ở đây: https://toddmotto.com/exploring-the-angular-1-5-component-method

Khi không sử dụng các thành phần (từ tài liệu):

  • cho các chỉ thị cần thực hiện các hành động i n chức năng biên dịch và tiền liên kết, vì chúng không có sẵn
  • khi bạn cần các tùy chọn định nghĩa chỉ thị nâng cao như ưu tiên, thiết bị đầu cuối, đa phần
  • khi bạn muốn một chỉ thị được kích hoạt bởi thuộc tính hoặc lớp CSS, chứ không phải là một phần tử.

Tôi tin rằng, đó mô tả tốt nhất bạn có thể tìm thấy là chính thức hướng dẫn: https://docs.angularjs.org/guide/component. Nó bao gồm tất cả các thay đổi, lý do thay đổi và cung cấp cho bạn sự hiểu biết sâu sắc về các thành phần.

+0

Template có thể là một chức năng trước đó. – EProgrammerNotFound

+0

Xin lỗi Arek, tôi sẽ phải bỏ phiếu này vì thông tin sai lệch được cung cấp. Nó cho thấy ấn tượng rằng các chỉ thị không còn hữu ích và cũng không được sử dụng nữa, điều này không đúng và tôi thấy chúng rất tiện dụng để cung cấp tính hợp lệ, lọc và định dạng cho các trường. Đó là một khái niệm rất quan trọng cần nhớ. Và các mẫu có thể hoạt động trong các chỉ thị, ngay cả trong 1.4 .. do đó không chắc chắn những gì bạn đang nói về chúng bây giờ có thể là "01" chỉ thị –

3

.component KHÔNG thay thế .directive như @rek Żelechowski cho biết. Vì vậy, ..

Bạn không thể làm gì với .component() mà bạn không thể thực hiện với .directive(). Nó nhằm mục đích đơn giản hóa cách chúng ta tạo ra "các thành phần" - có nghĩa là chỉ thị UI.

Khi nào/bạn nên sử dụng?

Rõ ràng có một vài trường hợp bạn không thể/không nên sử dụng nó:

  • Nếu bạn cần các chức năng liên kết (mặc dù bạn hiếm khi cần)
  • Nếu bạn muốn có một mẫu-less chỉ thị, ví dụ ng-nhấp chuột không có mẫu hoặc phạm vi riêng biệt

Đối với tất cả các chỉ thị khác của bạn, điều này sẽ hoạt động. Và bởi vì nó tiết kiệm được trên bản mẫu và ít bị lỗi dễ sử dụng hơn.

Mặc dù có tất cả các tính năng mới, .component() không thể thay thế hoàn toàn .directive().

0

Chỉ thị KHÔNG được thay thế, chúng chỉ được thay đổi vì nhiều lý do khác nhau có thể hơi quá nhiều để truy cập vào đây. Các tài liệu góc giải thích cho họ khá tốt, vì vậy bạn có thể bắt đầu xem xét các tài liệu có:

https://docs.angularjs.org/guide/component

Để có được một ý tưởng tốt hơn về những gì khác biệt giữa các chỉ thị và các thành phần đang có, tôi thấy rằng nó tốt hơn để tham khảo Tài liệu hướng dẫn 2.0. Angular 1.5 đã cho chúng tôi một cây cầu đến 2,0 mà 1,4 và trước đó không có. Một trong những thay đổi lớn hơn là loại bỏ $ scope, một cái khác đang cung cấp Components như một cách để xây dựng mọi thứ (được sử dụng CAO trong Angular 2.0).

Tất cả trong tất cả các loại thịt của sự thay đổi là nó chuẩn bị thế giới 1.X để di chuyển đến thế giới 2.X. Trong thế giới đó có các thành phần (là các chỉ thị mức phần tử ở tim), các chỉ thị cấu trúc và các chỉ thị thuộc tính. Xem các liên kết dưới đây để giúp hiểu từng liên kết (cùng với liên kết được cung cấp ở trên).

http://learnangular2.com/components/

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

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

Các vấn đề liên quan