Angular 2外部输入

Question

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它看起来很简单，但我遗漏了一些东西。我想要实现的是将应用程序外部的值传递给它。谢谢。

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更新答案：改为使用Renderer.selectRootElement。任何试图使用ElementRef.nativeElement的人都可能会看到关于这是最后手段的各种警告等。这是一个经过修改的更安全的版本。

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