Angular 2输入绑定不起作用

Question

index.html的:

  <app [myname]="some_name"></app>

app.component.ts:

  import {Component, Input, Output} from '@angular/core';

  @Component({
    selector: 'app',
    template: '<span>{{myname}}</span>'
  })

  export class CupBuyComponent {
      @Input() myname: String;

      constructor(){
          console.log(this.myname);
      }
  }

JS控制台说未定义.如何从.html文件中获取变量以将其发送到组件？

Answer 1

更新

这不起作用的原因是您放置的index.html不是角度组件.因此,Angular不会编译此元素.Angular不会在运行时读取属性值,只是在编译期间,否则我们会受到性能影响.

https://github.com/angular/angular/issues/1858#issuecomment-151326461

这将做你想要的:

的index.html

<app myname="some_name"></app>

根组件

export class CupBuyComponent {
  @Input() myname: String;

  constructor(elm: ElementRef){
    this.myname = elm.nativeElement.getAttribute('myname');
  }
}

此外,如果您希望将数据作为对象传递,您可以查看此问题

• RC5升级后将服务器参数传递给ngModule

原版的

如果您想将数据作为文本传递,那么它应该是

<app [myname]="'some_name'"></app>

要么

<app myname="some_name"></app>