Angular 2 外部输入 [英] Angular 2 external inputs

问题描述

请问你能帮忙吗?刚开始使用 Angular 2 并遇到以下问题.

Please can you help? Just starting with Angular 2 and having the following issue.

我的组件如下:

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

在我的 HTML 中:

Inside my HTML:

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

但是运行时我得到以下信息:

But when run I get the following:

下一个数字是NaN

看起来很简单，但我遗漏了一些东西.我想要实现的是将应用程序外部的值传递给它.

It looks simple but I am missing something. What I am trying to achieve is passing a value from outside the app into it.

谢谢.

推荐答案

您不能为应用程序的根组件指定属性绑定(输入).如果你真的想为它指定一些绑定，你应该使用额外的组件.请参阅这个plunkers.

You can't specify property bindings (inputs) for the root component of your application. If you really want to specify some binding for it you should use additional component. See 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 {}

这篇关于Angular 2 外部输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！