Sự khác nhau giữa @Input và đầu vào trong Angular2 Components là gì?

Question

Tôi đang cân nhắc vấn đề này và không thể tìm thấy bất kỳ lời giải thích nào.

Khi đi qua các tham số để một phần trong Angular2

Với

<my-component [attr]="someModelVariable"></my-component> 

Dường như có hai cách để chấp nhận attr giá trị ràng buộc:

@Component{(
    selector: "my-component", 
    inputs: ["attr"] 
)} 
export class MyComponent { 
} 

Hoặc bạn làm điều này:

@Component{(
    selector: "my-component" 
)} 
export class MyComponent { 
    @Input() 
    public attr: any; 
} 

Và tôi đã thực sự thấy mã sử dụng cả hai cùng một lúc, Ai đó có thể giải thích sự khác biệt giữa chúng là gì?

/Rickard

Answer 1

Mặc dù Eric đã cung cấp câu trả lời trong nhận xét, tôi sẽ thêm 2 xu.

Một lợi thế của việc sử dụng inputs là người dùng của lớp chỉ cần xem đối tượng cấu hình được chuyển đến trang trí @Component để tìm các thuộc tính đầu vào (và đầu ra).

Một lợi thế của việc sử dụng @Input là chúng ta có thể xác định loại và cho dù đó là tư nhân hoặc công cộng:

@Input() public attr: string; 

---

Lưu ý rằng các hướng dẫn phong cách recommends sử dụng @Input:

Đỗ sử dụng @Input và @Output thay vì các thuộc tính inputs và outputs thuộc tính @Directive và @Component trang trí.

Answer 2

Mẹo nhanh khác - sử dụng đầu vào thay vì trang trí đầu vào @ trong khi sử dụng loại có thể không thành công vì nó sẽ không nhận ra các biến mà bạn đã xác định trong trang trí @components. ngớ ngẩn nhưng khó chịu ... đó là lý do tại sao tôi đến đây ngay từ đầu.

tôi cũng đang đề nghị gắn bó với on-đi phong cách hướng dẫn mà khuyến cáo sử dụng các @input

Answer 3

Đúng là @Input cho phép định nghĩa đơn giản của loại hình, quy mô và mặc định giá trị, nhưng sự sẵn có của getter và setters có nghĩa là chức năng này có hiệu quả tương tự với cả hai kỹ thuật.

Tôi không định đề xuất sử dụng inputs trên @Input và tôi đồng ý với các áp phích khác là tốt nhất để tuân theo hướng dẫn về phong cách hiện tại, nhưng tôi thấy đó là bài tập hữu ích để so sánh hai phương pháp tự mình gặp họ.

Dưới đây là một so sánh đầy đủ hơn cũng sử dụng getters và setters để hy vọng chứng minh sự khác biệt về bố cục và điểm tương đồng trong hành vi.

Sử dụng inputs

@Component({ 
    selector: 'my-component', 
    template: '<h2>Value = {{ attr }}</h2>', 
    inputs: ['attr'] 
}) 
export class MyComponent { 

    public _attr: string; 

    set attr(value) : void { 
    console.log(`setter: ${value}`); 
    this._attr = value; 
    } 

    get attr() : string { 
    console.log(`getter: ${this._attr}`); 
    return this._attr; 
    } 
} 

Và sử dụng @Input:

@Component({ 
    selector: 'my-component', 
    template: '<h2>Value = {{ attr }}</h2>' 
}) 
export class MyComponent { 

    public _attr: string; 

    @Input() 
    set attr(value: string) : void { 
    console.log(`setter: ${value}`); 
    this._attr = value; 
    } 
    get attr() : string { 
    console.log(`getter: ${this._attr}`); 
    return this._attr; 
    } 
}