html - 传单图例如何通过 typescript 代码在div中设置样式css

Question

我尝试在 map 上设置图例。我不知道如何设置 css 样式，显示值(等级)。我应该在哪里放置样式？它的 Angular 5 和 typescript 。从等级中获取颜色也不起作用。

TS:

创建图例(){ let legend = L.control.attribution({position: "topright"});

function getColor(d) {
  return d > 1000 ? '#800026' :
    d > 500  ? '#BD0026' :
      d > 200  ? '#E31A1C' :
        d > 100  ? '#FC4E2A' :
          d > 50   ? '#FD8D3C' :
            d > 20   ? '#FEB24C' :
              d > 10   ? '#FED976' :
                '#FFEDA0';
}
legend.onAdd = function (map) {
  var div = L.DomUtil.create('div', 'info legend'),
    grades = [0, 10, 20, 50, 100, 200, 500, 1000],
    labels = [];

  // loop through our density intervals and generate a label with a colored square for each interval
  for (var i = 0; i < grades.length; i++) {
    div.innerHTML +=
      '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
      grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
  }
  return div;
};
legend.addTo(this.map);
}

CSS(不知道往哪插)

.legend {
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

Answer 1

在 Angular 中，您的 css 要么在 component.css 中，要么在整个应用程序的 style.css 中。至于 Angular 指南，您应该有一个包含组件 ts 文件和组件样式文件的组件文件夹。

在您的情况下，不清楚图例是否在您的应用程序的多个部分中使用，因此您可以拥有图例组件或其他包含图例的组件。该组件应该像这样添加一个 *.component.css 文件:

@Component({
    selector: 'something',
    templateUrl: './something.component.html',
    styleUrls: ['./something.component.css'],
})
export class SomethingComponent implements OnInit, OnDestroy  {

更新

当你手动操作 DOM angular 不要添加组件 css 所需的属性时，你应该更改你的 css 选择器

::ng-deep .legend

或者也许

:host ::ng-deep .legend