Угловые 2 внешних входа

Question

Пожалуйста, вы можете помочь? Просто начиная с 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

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

Благодарю.

Answer 1

Вы не можете указывать привязки свойств (входные данные) для корневого компонента вашего приложения. Если вы действительно хотите указать какое-либо связывание для него, вы должны использовать дополнительный компонент. Вижу это плунжеры.

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

Обходной путь читает это непосредственно, используя ElementRef:

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

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

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

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

Answer 3

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

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

Answer 4

Для тех, кто использует угловой 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