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

您无法为应用程序的根组件指定属性绑定（输入）。如果你真的想为它指定一些绑定，你应该使用额外的组件。请参阅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 {}

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

Angular 2外部输入

4 个答案: