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模板中的属性值

1 个答案: