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&nbsp;{Component,&nbsp;Input}&nbsp;from&nbsp;'angular2/angular2'@Component({ &nbsp;&nbsp;selector:&nbsp;'myapp', &nbsp;&nbsp;template:&nbsp;`&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<p>The&nbsp;next&nbsp;number&nbsp;is&nbsp;{{&nbsp;mynumber&nbsp;+&nbsp;1&nbsp;}}</p> &nbsp;&nbsp;`})class&nbsp;App&nbsp;{ &nbsp;&nbsp;@Input()&nbsp;mynumber:&nbsp;number;}@Component({ &nbsp;&nbsp;selector:&nbsp;'root', &nbsp;&nbsp;directives:&nbsp;[App], &nbsp;&nbsp;template:&nbsp;` &nbsp;&nbsp;&nbsp;&nbsp;<myapp&nbsp;[mynumber]="41"></myapp> &nbsp;&nbsp;`})export&nbsp;class&nbsp;Root&nbsp;{}

Answer 2

使用ElementRef更新答案：改为使用Renderer.selectRootElement。任何试图使用ElementRef.nativeElement的人都可能会看到关于这是最后手段的各种警告等。这是一个经过修改的更安全的版本。constructor(&nbsp;renderer:&nbsp;Renderer&nbsp;){ &nbsp;&nbsp;let&nbsp;rootElement&nbsp;=&nbsp;renderer.selectRootElement('app-root'); &nbsp;&nbsp;this.whateverInput&nbsp;=&nbsp;rootElement.getAttribute('my-attribute');}