Связывание с компонентом в angular2

Question

Я хотел бы ссылаться на свойство на компоненте в A., что «конструктор компонента B. этот шаблон компонента. В APIs на это, похоже, смещается немного, но я бы ожидать, что следующие работы:

<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

Что я делаю неправильно?

Answer 1

Я экспериментировал с Angular2 и столкнулся с той же проблемой. Однако, я нашел следующий для работы с текущим альфа-версией (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); 

Кажется, что свойства от класса, который передается bootstrap игнорируются. Не уверен, если это предназначено или ошибка.

Редактировать: Я только что создал Angular2 из источника и попробовал аннотацию @Attribute, она работает в соответствии с документами (но только на вложенном компоненте).

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

Отпечаток «Мэтт» на пульте.

Answer 2

Собственно, вы можете сделать это лучше. При определении свойств в компоненте, вы всегда указать его следующим образом:

howYouReadInClass:howYouDefineInHtml 

Таким образом, вы можете также сделать следующее:

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

    } 
} 

Таким образом, вы не получите конфликты в ТС , и у вас будет более четкий код - вы сможете определить переменную, как вы ее определяете в partent-компоненте.

Answer 3

Текущий способ заключается в том, чтобы украсить свойство как @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); 

выше примере из https://angular.io/docs/ts/latest/api/core/Input-var.html