更改 angular2 模板中的属性值

Question

我有简单的 angular2 组件：

import {Component} from 'angular2/core';
@Component({
  selector: 'circle',
  template: `<svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" 
      stroke-width="3" fill="red" />
    </svg>`,
})  
export class Circle { }

我想使用组件的一些参数动态更改 fill 属性，例如 <circle color="red"></circle>，结果有红色圆圈。可能吗？

Answer 1

您可以将 [...] 语法与 attr 前缀一起用于您的属性。请参阅以下内容：

@Component({
  selector: 'circle',
  template: `<svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" 
      stroke-width="3" [attr.fill]="fillAttr" />
    </svg>`,
})  
export class Circle {
  fillAttr:string = 'red';
}

如果要为组件提供输入，请使用 @Input 装饰器：

@Component({
  selector: 'circle',
  (...)
})
export class Circle {
  @Input('color')
  fillAttr:string = 'red';
}

更改 angular2 模板中的属性值

Changing attributes value in angular2 template

svg

angular2-directives

angular