Question

我正在学习Angular2，因为我正在创建一个示例代码。

我有一个可重用的组件Card，它应该接收一个参数：

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

@Component({
  selector: 'card',
  templateUrl: '../templates/card.html'
})

export class Card {
    @Input() title;
}

该title参数应为string。

到目前为止，这是该组件的html模板：

<div class='card'>
  {{ title }}
  <ng-content></ng-content>
</div>

从其他组件中我称之为：

<card
  [title]='Enter your raw json'>
  Example
</card>

我在控制台中遇到此错误（旁边很多其他人）：

EXCEPTION: Template parse errors:
Parser Error: Unexpected token 'your' at column 7 in [Enter your raw json] in JsonTextInput@1:2 ("<card
  [ERROR ->][title]='Enter your raw json'>
  Example
</card>"): JsonTextInput@1:2

属性绑定有什么问题？

Answer 1

使用属性绑定时，Angular2的模板解析器会将内容解释为组件类的属性：

@Component({
  template: `<card [title]="property"> ... </card>`,
  ...
})
class SomethingComponent {
  property = 'something'; // this will be bound to the title input of card
}

如果要将字符串文字传递给属性绑定，请将其放在单引号内，如下所示：

[title]="'some title'"

Angular 2绑定属性

1 个答案: