时间戳

首页 > 解决方案 > 样式未应用于通过网络调用注入的 HTML

html - 样式未应用于通过网络调用注入的 HTML

问题描述

在我的 Angular 8.1.3 应用程序中，我正在注入 HTML div，我想将样式应用于该 HTML 有效负载中使用的类。

但是除非我将它们放在项目的根级 CSS 中，否则不会应用样式。（我不想这样做）

子组件.html

<div id="ImgBlock" class="col-xs-12">
      <div> [innerHTML]="ImagePayload"></div>
</div>

这是我的 Sub-component.ts

 @Component({
      selector: 'SubComponent',
      templateUrl: './SubComponent.html',
      styleUrls: ['./SubComponent.scss'],
      encapsulation: ViewEncapsulation.None
    })

    export class SubComponent implements OnInit, AfterViewInit {
     public ImagePayload: string;

     // Constructros and other functions

    }

这是创建子组件实例并在 ImagePayload 变量中注入 HTML 有效负载的父组件。

       @Component({
       selector: 'parentComponent',
       templateUrl: './parentComponent.html',
       styleUrls: ['./parentComponent.scss'],
       encapsulation: ViewEncapsulation.None
     })
     export class parentComponent implements OnInit, OnDestroy { 

    showImage(data: Somedata) {
      const dialog: DialogRef = this.dialogService.open({
       title: 'recognise Image data ',
       content: SubComponent,
    });

      const info = dialog.content.instance;
      info.ImagePayload = data.challenge;
    }
   }

这是 imagePayload 变量中使用的类的 css 样式。

  input.Image_selection_checkbox {
            width: 15px;
        }

我将相同的样式应用于

1) 子组件.scss

2) 父组件.scss

3）app.component.scss（父组件的）

4）这个特定子项目的style.scss（项目也有多个子项目）

但他们都没有得到应用！

但是当我将相同的样式放在根 style.scss （主项目目录！）中时，它正在被应用。

我对封装的作用了解有限。那是罪魁祸首吗？

其他问题是什么？

标签： htmlcssangularsass

解决方案

推荐阅读