Angolare 2 ingressi esterni

Question

Si prega di aiutare? Sto iniziando con Angular 2 e ho il seguente problema.

La mia componente è qui sotto:

@Component({ 
    selector: 'myapp', 
    inputs: ['mynumber'] 
}) 
@View({ 
    template: `<p>The next number is {{ mynumber + 1 }}</p>' 
}) 
export class App { 
    mynumber: number; 
} 
bootstrap(App); 

Dentro il mio HTML:

<myapp [mynumber]='41'></myapp> 

Ma quando corsa ottengo il seguente:

Il numero successivo è NaN

Sembra semplice ma mi manca qualcosa. Quello che sto cercando di ottenere è passare un valore dall'esterno dell'app al suo interno.

Grazie.

Answer 1

Non è possibile specificare i collegamenti di proprietà (input) per il componente root dell'applicazione. Se vuoi davvero specificare un legame per questo, dovresti usare un componente aggiuntivo. Vedi this plunkers.

import {Component, Input} from 'angular2/angular2' 

@Component({ 
    selector: 'myapp', 
    template: ` 
    <p>The next number is {{ mynumber + 1 }}</p> 
    ` 
}) 
class App { 
    @Input() mynumber: number; 
} 

@Component({ 
    selector: 'root', 
    directives: [App], 
    template: ` 
    <myapp [mynumber]="41"></myapp> 
    ` 
}) 
export class Root {} 

Answer 2

Una soluzione sta leggendo direttamente tramite ElementRef:

constructor(elementRef:ElementRef) { 
    console.log(elementRef.nativeElement.getAttribute('someattribute'); 
} 

e usarlo come

<myapp mynumber='41'></myapp> 

Vedi anche https://github.com/angular/angular/issues/1858

Answer 3

Update per risposte utilizzando ElementRef: utilizzare renderer. selectRootElement invece. Chiunque stia tentando di utilizzare ElementRef.nativeElement probabilmente vedrà vari avvisi su come questa sia l'ultima risorsa, ecc. Ecco una versione modificata e più sicura.

constructor(renderer: Renderer){ 
    let rootElement = renderer.selectRootElement('app-root'); 
    this.whateverInput = rootElement.getAttribute('my-attribute'); 
} 

Answer 4

Per coloro che utilizzano angolare 4: Se si decide di usarlo come un attributo del genere

<myapp mynumber='41'></myapp> 

si potrebbe utilizzare l'annotazione @attribute così:

class Component { 
    constructor(@Attribute('attributeName') public param:String){ 
     /** some process with your injected param **/ 
    } 
} 

Testato e lavorato con successo nella mia app.

Trovato il tragitto: https://gillespie59.github.io/2015/10/08/angular2-attribute-decorator.html