为什么我的 angular 组件会忽略我的 css 文件？

Question

我有一个具有此文件结构的角度组件：

.
|____custom-d3-tree.component.css
|____custom-d3-tree.component.spec.ts
|____custom-d3-tree.component.ts
|____custom-d3-tree.module.ts
|____custom-d3-tree.service.spec.ts
|____custom-d3-tree.service.ts
|____tree.dendo.model.ts

该文件tree.denco.model.ts定义：

export class TreeModel {

它实现了一个 d3 树。树中的节点在其中foreignObject定义了包含订单列表的 's。这是将 foreignObject 添加到矩形节点的代码：

    nodeEnter.append('foreignObject')
      .attr('x', function(d) { if(d.data.component_type) { return 5; } return 0; })
      .attr('y', function(d) { if(d.data.component_type) { return 5; } return 0; })
      .attr('width', this.rect_width)
      .attr('height', this.rect_height)
      .style('overflow', 'auto')
      .append('xhtml')
      .style("font", "10px 'Helvetica Neue'")
      .html(function (d) {
        if( d.data.component_type ) {
          return '<div style="width: ' + (d.width - 10) + 'px; height: '
            + (d.height - 10 ) + 'px;" class="node-text wordwrap">'
            + '<b>' +  d.data.name + '</b><br><br></div>';
        } else {
          let scrollList = '<nav><ul>';
          let startDate = "2019-04-05";
          for( let i=0; i < d.data.components.length; i++ ) {
            let url = environment.frontEndUrl + '/component-mapping-dynamic?node='
              + d.data.name + '&filter_key=' + d.data.components[i].filter_key;
            // scrollList += '<li style="list-style: ' + 'none' + '"><a href="'+ url + '">' + d.data.components[i].name + '</a></li>';
            scrollList += '<li><a href="'+ url + '">' + d.data.components[i].name + '</a></li>';
          }
          scrollList += '</ul></nav>';
          return '<div>' +  scrollList + '</div>';
        }
    });

我有一个 css 文件，custom-d3-tree.component.css其中包含：

.d3-chart {
  width: 100%;
  min-height:600px;
}

.wordwrap {
  white-space: pre-wrap; /* CSS3 */
  white-space: -moz-pre-wrap; /* Firefox */
  white-space: -pre-wrap; /* Opera <7 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* IE */
}

div:hover {
  overflow-y: scroll;
}

ul {
  list-style-type: circle;
}
nav ul{height:1000px; width:18%; list-style-type: none;}

div {
  height: 100px;
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
  overflow-y: scroll;
}

/* nav ul{height:100px; width:18%; list-style-type: none;} */
/* nav ul{overflow:hidden; overflow-y:scroll;} */

这是我的代码运行时树的样子：

正如您所看到的，我文件中的大部分 css 元素（如果不是全部）都被忽略了，我不明白为什么。

更新：这是我的custom-d3-tree.component.ts文件：

import { Component, OnInit, OnChanges, ViewChild, ElementRef,
   Input, Output, EventEmitter} from '@angular/core';

import { AngularD3TreeLibService } from './custom-d3-tree.service';
@Component({
  selector: 'custom-angular-d3-tree-lib',
  template: `
    <div class="d3-chart" #chart></div>
  `,
  styleUrls: ['./custom-d3-tree.component.css']
})
export class AngularD3TreeLibComponent implements OnInit, OnChanges {
  @ViewChild('chart') private chartContainer: ElementRef;
  @Input() treeData: any = [];
  @Output() onNodeChanged: EventEmitter<any>= new EventEmitter();
  @Output() onNodeSelected: EventEmitter<any>= new EventEmitter();

  constructor( private treeService: AngularD3TreeLibService ) {
    treeService.setNodeChangedListener((node)=>{
      this.onNodeChanged.emit(node);
    });
    treeService.setNodeSelectedListener((node)=>{
      this.onNodeSelected.emit(node);
    });
  }

  ngOnInit() {}
  ngOnChanges(changes: any) {
    this.seedTree();
  }

  seedTree(){
    if(!!this.treeData){
      this.treeService.createChart(this.chartContainer, this.treeData);
      this.treeService.update();
    }
  }
}

Answer 1

默认根据https://angular.io/guide/component-styles

@Component 元数据中指定的样式仅适用于该组件的模板。

这样你就可以只设置这个元素的样式

<div class="d3-chart" #chart></div>

使用以下选择器div或.d3.chart.

如果要将样式的可见性扩展到组件的所有子元素，则应考虑使用:host和::ng-deep选择器的组合，即：

:host ::ng-deep .wordwrap {
  ...
}

:host ::ng-deep div:hover {
  ..
}

我会避免使用div选择器，而是给他们一个类。

还有一个很好的概述，介绍了我们如何为 Angular 组件设置样式：

• Angular :host, :host-context, ::ng-deep - Angular 视图封装