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');
  }
}

此外，如果您想要将数据作为对象传递，您可以查看此问题

Passing server parameters to ngModule after RC5 upgrade

<强>原始

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

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

或

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

Answer 2

重要

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

如果您想将字符串some_name传递给myname输入变量，则不应使用[]：

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

如果您使用[]执行此操作，则会在您的组件中查找名为some_name的变量，而这个变量是您没有的，这就是您获取{{1}的原因在您的控制台中。

Answer 3

在此活动之后及之后可以访问：

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

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

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

Angular 2输入绑定不起作用

3 个答案: