我有一个引用组件。我将此引用传递给服务,在 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>
最佳答案
这是预期的。这就是 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
})
关于angular - 为什么样式不应用于动态创建容器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66736653/