Angular 2 zewnętrzne wejścia

Question

Czy możesz pomóc? Właśnie zaczynałem od Angular 2 i miałem następujący problem.

Moja składnikiem jest poniżej:

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

Wewnątrz mojego HTML:

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

Ale kiedy prowadzony uzyskać następujące:

Następny numer jest NaN

Wygląda proste, ale brakuje mi czegoś. To, co próbuję osiągnąć, to przekazywanie do niego wartości spoza aplikacji.

Dzięki.

Answer 1

Nie można określić powiązań właściwości (wejść) dla składnika głównego aplikacji. Jeśli naprawdę chcesz określić pewne powiązanie, powinieneś użyć dodatkowego komponentu. Zobacz 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

Rozwiązaniem jest czytanie go bezpośrednio za pomocą ElementRef:

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

i używać go jak

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

Zobacz również https://github.com/angular/angular/issues/1858

Answer 3

aktualizacji do odpowiedzi przy użyciu ElementRef: wykorzystanie Renderer. selectRootElement zamiast tego. Każdy, kto próbuje użyć elementu ElementRef.nativeElement, prawdopodobnie widzi różne ostrzeżenia o tym, jak to jest ostatecznością itp. Oto zmodyfikowana, bezpieczniejsza wersja.

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

Answer 4

Dla osób korzystających kątowe 4: Jeśli zdecydujesz się używać go jako atrybut jak tego

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

mógłby po prostu użyć adnotacji @Attribute tak:

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

Przetestowałem i działałem z powodzeniem w mojej aplikacji.

znalazł drogę tam: https://gillespie59.github.io/2015/10/08/angular2-attribute-decorator.html