Ràng buộc vào một thuộc tính thành phần trong angular2

Question

Tôi muốn tham chiếu một thuộc tính trên một thành phần trong A. đó là 'cấu tử của thành phần B. mẫu của thành phần đó. Các apis về vấn đề này dường như thay đổi một chút, nhưng tôi mong đợi những điều sau đây để làm việc:

<my-component [greeting]="hello"></my-component> 

// my component.es6.js 
@Component({ 
    selector: 'my-component', 
    properties: { 
    'greeting': 'greeting' 
    } 
}) 
@View({ 
    template: '{{greeting}} world!' 
}) 
class App { 
    constructor() { 
    console.log(this.properties) // just a guess 
    } 
} 

Plunkr

Tôi đang làm gì sai?

Answer 1

Tôi đã thử nghiệm với Angular2 và đã đưa ra cùng một vấn đề. Tuy nhiên, tôi thấy những điều sau đây để làm việc với phiên bản alpha hiện tại (2.0.0-alpha.21)

@Component({ 
    selector: 'hello', 
    properties: {'name':'name'} 
}) 
@View({ 
    template:`<h1>Hello {{_name}}</h1>` 
}) 
class Hello { 
    _name: string; 

    constructor() { 
    console.log(this); 
    }; 

    set name(name){ 
    this._name = name; 
    } 
} 

@Component({ 
    selector: 'app', 
}) 
@View({ 
    template: 
    ` 
    <div> 
     <hello name="Matt"></hello> 
    </div> 
    `, 
    directives: [Hello] 
}) 
class Application { 
    constructor() { }; 
} 

bootstrap(Application); 

Dường như các thuộc tính trên lớp mà được chuyển cho bootstrap được bỏ qua. Không chắc chắn nếu điều này là dự định hoặc một lỗi.

Chỉnh sửa: Tôi vừa tạo Angular2 từ nguồn và đã thử chú thích @Attribute, nó hoạt động theo tài liệu (nhưng chỉ trên thành phần lồng nhau).

constructor(@Attribute('name') name:string) { 
    console.log(name); 
}; 

In 'Matt' vào bảng điều khiển.

Answer 2

Thực ra, bạn có thể làm tốt hơn. Khi bạn đang xác định các thuộc tính trong thành phần của bạn, bạn luôn xác định nó theo cách sau:

howYouReadInClass:howYouDefineInHtml 

Vì vậy, bạn cũng có thể làm như sau:

@Component({ 
    selector: 'my-component', 
    properties: { 
    'greetingJS:greetingHTML' 
    } 
}) 
@View({ 
    template: '{{greeting}} world!' 
}) 
class App { 
set greetingJS(value){ 
this.greeting = value; 
} 
    constructor() { 

    } 
} 

Bằng cách này bạn sẽ không nhận được mâu thuẫn trong TS và bạn sẽ có một mã rõ ràng hơn - bạn sẽ có thể xác định biến khi bạn xác định nó trong thành phần phụ.

Answer 3

Cách hiện tại là trang trí thuộc tính là @Input.

@Component({ 
    `enter code here`selector: 'bank-account', 
    template: ` 
    Bank Name: {{bankName}} 
    Account Id: {{id}} 
    ` 
}) 
class BankAccount { 
    @Input() bankName: string; 
    @Input('account-id') id: string; 
    // this property is not bound, and won't be automatically updated by Angular 
    normalizedBankName: string; 
} 
@Component({ 
    selector: 'app', 
    template: ` 
    <bank-account bank-name="RBC" account-id="4747"></bank-account>`, 
    directives: [BankAccount] 
}) 
class App {} 
bootstrap(App); 

trên ví dụ là từ https://angular.io/docs/ts/latest/api/core/Input-var.html