Typescript D3.js 组件中的样式未以Angular 2 显示

我用的是Angular 2和D3.js.我想展示一个红色的长方形.

只有在style.css文件中输入样式时，它才有效.

当我将我的样式放入组件101时，它不起作用.this plunkr元支票

当我使用组件styles: []时，如何让它工作？谢谢

UPDATE:@micronyks提供了一个解决方案，但它使组件中的样式成为全局的，与在style.css文件中写入基本上没有区别.在this plunkr中，它显示一个组件中的样式将覆盖另一个组件的样式，因此无法显示绿色和红色矩形.

UPDATE 2:@Günter的方法完美地解决了这个问题！！以甘特的方式提醒一下:它至少需要Angular beta 10.(我的其他Plunkr使用Angular beta 8)使用Angular beta 12的绿色和一个红色矩形的工作演示是here.

import {Component} from 'angular2/core'
@Component({
  selector: 'my-app',
  providers: [],
   styles: [`
    /*this does not work*/
    .bar {
      fill: red;
    }
  `],
  template: `
    <div>
      <svg class="chart"></svg>
    </div>
  `,
  directives: []
})
export class App {
  constructor() {}

  ngOnInit() {
    this.draw();
  }

  draw() {
    let data = [{name: 'A', value: 1}];
    let width = 400, height = 200;

    let x = d3.scale.ordinal().rangeRoundBands([0, width]);
    let y = d3.scale.linear().range([height, 0]);

    let chart = d3.select(".chart")
      .attr("width", width)
      .attr("height", height)
      .append("g");

    x.domain(data.map(function(d) { return d.name; }));
    y.domain([0, d3.max(data, function(d) { return d.value; })]);

    chart.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.name); })
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .attr("width", x.rangeBand());
  }
}