Collegamento a una proprietà del componente in angular2

Question

Vorrei fare riferimento a una proprietà su un componente all'interno di A. che il costruttore del componente B. il modello di quel componente. Le API su questo sembrano essere spostando un po ', ma mi aspetto le seguenti funzioni:

<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

Che cosa sto facendo di sbagliato?

Answer 1

Stavo sperimentando Angular2 e mi sono imbattuto nello stesso problema. Tuttavia, ho trovato quanto segue per lavorare con la versione alpha di corrente (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); 

Sembra che le proprietà della classe che viene passato bootstrap vengono ignorati. Incerto se questo è inteso o un bug.

Modifica: ho appena creato Angular2 dal codice sorgente e ho provato l'annotazione @Attribute, funziona come per i documenti (ma solo sul componente nidificato).

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

Stampa "Matt" sulla console.

Answer 2

In realtà, puoi farlo in modo migliore. Quando si definiscono le proprietà nel componente, è sempre specificarlo nel seguente modo:

howYouReadInClass:howYouDefineInHtml 

Quindi, si può anche effettuare le seguenti operazioni:

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

    } 
} 

In questo modo non sarà possibile ottenere i conflitti in TS e avrai un codice più chiaro - sarai in grado di definire la variabile come la definisci nel componente partent.

Answer 3

Il modo corrente è di decorare la proprietà come @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); 

sopra esempio da https://angular.io/docs/ts/latest/api/core/Input-var.html