Angular 2 внешних входа

Пожалуйста, помогите? Только начиная с Angular 2 и имея следующую проблему.

Мой компонент ниже:

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

Внутри моего HTML:

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

Но при запуске я получаю следующее:

Следующее число NaN

Это выглядит просто, но я чего-то не хватает. То, что я пытаюсь достичь, - это передать значение извне приложения в него.

Спасибо.

Ответы

Ответ 1

Вы не можете указать привязки свойств (входы) для корневого компонента вашего приложения. Если вы действительно хотите указать некоторые привязки для него, вы должны использовать дополнительный компонент. См. этот 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 {}

Ответ 2

Обходной путь - это прямое чтение с помощью ElementRef:

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

и используйте его как

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

См. также https://github.com/angular/angular/issues/1858

Ответ 3

Обновите ответы, используя ElementRef: вместо этого используйте Renderer.selectRootElement. Любой, кто пытается использовать ElementRef.nativeElement, вероятно, видит различные предупреждения о том, как это последнее средство и т.д. Вот модифицированная, более безопасная версия.

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

Ответ 4

Для тех, кто использует angular 4: Если вы решили использовать его как атрибут, подобный этому

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

Вы можете просто использовать аннотацию @Attribute следующим образом:

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

Протестировано и успешно работает в моем приложении.

Найден там путь: https://gillespie59.github.io/2015/10/08/angular2-attribute-decorator.html