加一个合成的吸引器

Question

嗨，我刚刚开始我的第一个角2项目，我的第一个任务是移植一个现有的和1指令。我需要做的是将svg元素的属性设置为“translate( outerRadius，innerRadius )”，其中outerRadius和innerRadius是来自组件的变量。这就是我尝试过的：

<g [attr.transform]="translate(outerRadius, innerRadius)"></g>

此语法给出了以下错误：

​

​

这是我的组件代码：

import {Component, Input, OnInit, ElementRef} from 'angular2/core';
import {NgStyle} from 'angular2/common';

@Component({
    selector: 'donut-chart',
    templateUrl: './app/engager/components/donut-chart.component.html',
    directives: [NgStyle]
})
export class DonutChart implements OnInit {

    public outerRadius: number = 50;
    public innerRadius: number;

    ngOnInit() {
        const defaultRadius: number = 45;

        this.innerRadius = this.innerRadius < this.outerRadius ? this.innerRadius : defaultRadius;

    }
}

我做错了什么？

Answer 1

您可以使用类型记录的模板串内插：

<g [attr.transform]="translateAsString"></g>

export class DonutChart implements OnInit {

  public outerRadius: number = 50;
  public innerRadius: number;
  public translateAsString: string;

  ngOnInit() {
    const defaultRadius: number = 45;

    this.innerRadius = this.innerRadius < this.outerRadius ? this.innerRadius : defaultRadius;
    this.translateAsString = `translate(${this.outerRadius}, ${this.innerRadius})`;

  }
}

Answer 2

在这个标记<g [attr.transform]="translate(outerRadius, innerRadius)"></g>中，translate(outerRadius, innerRadius)被解释为一个表达式的角度。outerRadius和innerRadius是有效变量，但translate不是。

试一试

<g [attr.transform]="'translate(' + outerRadius + ',' + innerRadius + ')'"></g>

这将呈现为<g transform="translate(50, 45)"></g>