Angular 2输入绑定不起作用[重复]答案

【问题标题】：Angular 2 Input binding does not work [duplicate]Angular 2输入绑定不起作用[重复]
【发布时间】：2017-07-22 19:38:15
【问题描述】：

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 文件中获取变量以将其发送到组件？

【问题讨论】：

因为你还没有为myname定义值，所以它是未定义的？正如您在title 中提到的，我在您的问题中没有看到输入
只是不要在根组件（AppComponent）上这样做。
阅读下面我编辑的评论，我解释了为什么即使使用@yurzui 和我提供的解决方案你的代码也无法工作。

标签： angular

【解决方案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');
  }
}

另外，如果你想将数据作为对象传递，你可以看看这个问题

Passing server parameters to ngModule after RC5 upgrade

原创

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

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

或

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

【讨论】：

都是一样的未定义

【解决方案2】：

重要

我在下面解释了您的绑定有什么问题，但即使您使用我提供的代码，它也不起作用，因为您试图将输入传递给您正在引导的组件（根组件），这是不可能的。

如果你想将字符串some_name 传递给myname 输入变量，你应该不带[]：

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

如果您像以前一样使用[] 执行此操作，它会在您的组件中查找名为some_name 的变量，而这就是您在控制台中获得undefined 的原因。

【讨论】：

【解决方案3】：

在此活动期间和之后可以访问：

ngOnInit() { ... here ... }

正如其他人已经提到的那样..如果您使用[myname]="variable or expression()" 语法，则“”内部需要是变量或组件的表达式..

如果您使用这种语法myname="anyStringHere"，您只能在此处粘贴一个字符串..

【讨论】：