传单图例如何从打字稿代码在 div 中设置样式 css

Question

我尝试在我的地图上设置一个图例。我不知道如何设置css样式，显示值（等级）。我应该把样式放在哪里？它的角度 5 和打字稿。 从等级中获取颜色也不起作用。

TS：

createLegend() { 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 中。至于角度指南，您应该有一个包含组件 ts 文件和组件样式文件的组件文件夹。

在您的情况下，不清楚是否在应用程序的多个部分中使用了图例，因此您可以使用图例组件或其他带有图例的组件。该组件应该添加一个 *.component.css 文件，如下所示：

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

更新

当您手动操作 DOM 角度时，不要添加组件 css 所需的属性，您应该在

中更改 css 选择器

::ng-deep .legend

或许

:host ::ng-deep .legend