Question

我的最终目标是构建一个组件来包装Google Map。谷歌地图对象有很多选项。

在Angular1中，我读取属性以构建地图对象选项。

使用Angular2，我想以不同方式使用inputs使用属性绑定，这样我就可以实现单向或双向绑定。

作为第一步，使用此plunker https://plnkr.co/edit/PXg79x?p=preview，我尝试从html中读取许多属性，并为多个选项设置输入。例如，a，b，c，d，e，f

@Component({
  selector: 'my-app',
  providers: [],
  inputs: ['a', 'b', 'c', 'd', 'e', 'f'],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      inputs: {{inputs | json}} <br/>
      a:{{a}}, b:{{b}}, c:{{c}}, d:{{d}}, e:{{e}}, f:{{f}}
    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2 (Release Candidate!)';
  }
}

我在这样的html中使用过。

  <my-app [a]="1" [b]="2" [c]="3" [d]="4" [e]="5" [f]="6">
    loading...
  </my-app>

我期待看到a:1, b:2, c:3, d:4..等等。

但相反，我看到a:, b:, c:, d:, e:..

我在这里做错了什么？

----编辑----
此外，我不希望得到答案，但如果有人可以告诉我，无论是否定义inputs或@Input，我都可以动态定义这些输入，我们将非常感激。

Answer 1

这可能听起来很愚蠢，但你不能用root组件（我的应用程序）这样做..你需要在子组件中这样做。由于my-app是整个角度应用程序。

e.g。

src/my-component.ts档案

import {Component, Input} from '@angular/core'
@Component({
  selector: 'my-component',
  providers: [],
  inputs: ['a', 'b', 'c', 'd', 'e', 'f'],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      inputs: {{inputs | json}} <br/>
      a:{{a}} b:{{b}} c:{{c}} d:{{d}} e:{{e}} f:{{f}}
    </div>
  `,
  directives: []
})
export class MyComponent {
  constructor() {
    this.name = 'Angular2 (Release Candidate!)';
  }
}

src/app.ts档案

//our root app component
import {Component, Input} from '@angular/core'
import { MyComponent } from './my-component';

@Component({
  selector: 'my-app',
  template: `
    <my-component a="1" b="2" c="3" d="4" e="5" f="5">
    </my-component>
  `,
  directives: [ MyComponent ]
})
export class App {

}

此外，[a]="1"尝试在类上下文中查找名为1的变量，并对其进行评估以获取其值。而a="1"获取值"1"为一个字符串。

因此，让[a]="myVariable"获得myVariable中的任何值，而a="myVariable"将传递一个字符串文字，其值为＆＃34; myVariable＆＃34;

Plunker：https://plnkr.co/edit/DhHgED?p=preview

有道理吗？

编辑：

据我所知，您无法动态定义输入，因为angular2编译器需要事先知道组件定义。

Angular 2输入属性未正确绑定

1 个答案: