angular - 为什么样式不应用于动态创建容器？

Question

我有一个引用组件。我将此引用传递给服务，在 promise 之后我在主机组件中创建一个新容器:

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
  providers: [MapService],
})
export class MapComponent implements OnInit {
   constructor(private el: ElementRef, private mapService: MapService) {
       this.mapService.set(this.el.nativeElement);
   } 
}

结果我得到了这个 DOM 结构:

<app-map>
    <div id="created"></div>
</app-map>

为什么当我尝试设计风格时 map.component.scss它不适用于此容器:

#created {
    padding: 10px;
    background: #ccc;
    width: 400px;
    height: 300px;
}

结果 DOM 元素看起来:

<app-map time="3000" _nghost-rpv-c11="" ng-version="11.0.9">
   <div id="created"></div>
</app-map>

Answer 1

这是预期的。这就是 Angular 样式封装的工作原理。要修复它，请通过以下方式删除此组件的封装

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
  providers: [MapService],
  encapsulation: ViewEncapsulation.None // here we turn of styles modification for this component
})