Угловые 2 внешних входа
Пожалуйста, помогите? Только начиная с Angular 2 и имея следующую проблему.
Мой компонент ниже:
@Component({ selector: 'myapp', inputs: ['mynumber'] }) @View({ template: `The next number is {{ mynumber + 1 }}
' }) export class App { mynumber: number; } bootstrap(App);
Внутри моего HTML:
Но при запуске я получаю следующее:
Следующее число – NaN
Это выглядит просто, но я чего-то не хватает. То, что я пытаюсь достичь, – это передать значение извне приложения в него.
Благодарю.
- Angular 2 - просмотр не обновляется после изменения модели
- Угловое изменение на каждом нажатии клавиши
- Строки таблицы Angular2 как компонент
- Обнаружение изменения углового2: ngOnИзменяет не стрельбу по вложенному объекту
- Просмотр не обновляется при изменении в Angular2
- Угловое redirect на страницу входа в систему
- Обработка 401s по всему миру с помощью углового
- Угловое - задайте заголовки для каждого запроса
Вы не можете указать привязки свойств (входы) для корневого компонента вашего приложения. Если вы действительно хотите указать некоторые привязки для него, вы должны использовать дополнительный компонент. Посмотрите на этих плунжеров .
import {Component, Input} from 'angular2/angular2' @Component({ selector: 'myapp', template: ` The next number is {{ mynumber + 1 }}
` }) class App { @Input() mynumber: number; } @Component({ selector: 'root', directives: [App], template: ` ` }) export class Root {}
Обходной путь – это чтение его непосредственно с помощью ElementRef
:
constructor(elementRef:ElementRef) { console.log(elementRef.nativeElement.getAttribute('someattribute'); }
и использовать его как
Обновите ответы, используя ElementRef: вместо этого используйте Renderer.selectRootElement. Любой, кто пытается использовать ElementRef.nativeElement, вероятно, видит различные предупреждения о том, как это последнее средство и т. Д. Вот модифицированная, более безопасная версия.
constructor( renderer: Renderer ){ let rootElement = renderer.selectRootElement('app-root'); this.whateverInput = rootElement.getAttribute('my-attribute'); }
Для тех, кто использует угловой 4: если вы решили использовать его как атрибут
Вы можете просто использовать аннотацию @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