Question

我有一个使用chartid作为输入的组件，我这样使用：

<plotlychart chartid="plot"> 
</plotlychart>

这是组件。在模板中，我尝试将div的id设置为变量＆＃34; chartid＆＃34;，但这不起作用。

@Component({
selector: 'plotlychart',
template: `
    <div [id]="chartid" 
     style="width: 480px; height: 400px;">
    <!-- Plotly chart will be drawn inside this DIV -->
    </div>
`,
styleUrls: []
})


export class PlotlyComponent{    
    @Input() chartid: string; 
}

我的问题是：是否可以在组件的模板中使用chartid的值？

解决方案

<plotlychart chartid="plot"> 
</plotlychart>

在组件中：

@Component({
selector: 'plotlychart',
template: `
    <div id="{{chartid}}" 
     style="width: 480px; height: 400px;">
    <!-- Plotly chart will be drawn inside this DIV -->
    </div>
`,
styleUrls: []
})


export class PlotlyComponent{    
    @Input() chartid: string; 
    ngAfterViewInit(){
    Plotly.newPlot(this.chartid, this.data, this.layout, this.options);
    }
}

Answer 1

您的<plotlychart>应该是这样的：

<plotlychart [chartid]="plot"> </plotlychart> <!-- (note the [] here!) -->

现在，在 PlotlyComponent 模板中，您可以使用chartid的插值，如下所示：

template: `
    <div id="{{ chartid }}" 
         style="width: 480px; height: 400px;">
    <!-- Plotly chart will be drawn inside this DIV -->
    </div>
`,

进一步阅读：

Answer 2

作为OP mentioned他正在使用Plotly ......

尝试将Plotly.plot(this.chartid, ...)包装在AfterViewInit方法中。当我调用Plotly时，我曾经遇到过组件未正确加载的问题以及实际页面DOM中的问题。使用AfterViewInit可确保在调用图表库之前设置DOM。

在您的组件中：

ngAfterViewInit() {
    Plotly.plot(this.chartid, yourdata, ...)
  }

希望这有帮助。

如何在角度2中使用模板中的变量

2 个答案: