Angular 2 externe Eingänge

Question

Bitte können Sie helfen? Beginne einfach mit Angular 2 und habe folgendes Problem.

Meine Komponente ist unten:

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

In meinem HTML:

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

Aber als Run ich folgendes erhalten:

Die nächste Zahl ist NaN

Es sieht einfach, aber mir fehlt etwas. Was ich versuche zu erreichen, ist einen Wert von außerhalb der App hinein zu geben.

Danke.

Answer 1

Sie können keine Eigenschaftsbindungen (Eingaben) für die Stammkomponente Ihrer Anwendung angeben. Wenn Sie wirklich eine Bindung dafür angeben möchten, sollten Sie eine zusätzliche Komponente verwenden. Siehe 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

Eine Abhilfe liest es direkt ElementRef mit:

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

und verwenden Sie es wie

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

Siehe auch https://github.com/angular/angular/issues/1858

Answer 3

Update Antworten mit ElementRef: Renderer verwenden. selectRootElement stattdessen. Jeder, der versucht, ElementRef.nativeElement zu verwenden, sieht wahrscheinlich verschiedene Warnungen darüber, wie dies ein letzter Ausweg usw. ist. Hier ist eine modifizierte, sicherere Version.

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

Answer 4

Für diejenigen unter Verwendung von Winkel 4: Wenn Sie es als ein Attribut zu verwenden, wie die

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

Sie könnten nur die Anmerkung verwenden @Attribute wie folgt aus:

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

Getestet und erfolgreich in meiner App gearbeitet.

Fand den Weg dorthin: https://gillespie59.github.io/2015/10/08/angular2-attribute-decorator.html