Question

我正在创建一种机制来定义和计算我自己的可重用网格。以下是返回内容的示例

[left-bleed-start] 10.245000000001024px [left-bleed-end content-col-start] 1331.8500000001332px [content-col-end right-bleed-start] 10.245000000001024px [right-bleed-end] / [top -bleed-start] 10.245000000001024px [top-bleed-end link-row-start] 81.9600000000082px [content-row-end footer-row-start] 163.9200000000164px [footer-row-end bottom-bleed-start] 10.245000000001024px [底渗出端]

当像这样应用时

<div class="appCompGrid" [style.grid]="Grid.GridCode"></div>

我收到了santization警告。但是，如果我像这样复制并粘贴值

<div class="appCompGrid" style="grid: (same code);"></div>

一切正常。 css类是我将显示定义为网格的地方，无论屏幕的大小如何，它都会保持一致。我唯一能想到的就是回到函数中并将+ ';'添加到网格代码放在一起的末尾，想象一下可能会抛出一些东西，但它仍会给出相同的错误。我尝试使用display: grid;内联来查看是否有问题从css类和内联中读取它有一些奇怪的原因。

我使用@HostListener重新计算网格，因为尺寸或方向发生了变化，到目前为止，我还没有遇到Angular这样的问题，所以我不会＆＃39 ;了解从何处开始弄清楚为什么会发生这种情况。以下是我如何设置组件类的方法。

基类

export class GridBuilder {
    Settings : GridInit        = new GridInit();
    GridData : Array<GridType> = new Array();
    Grid     : GridOutput      = new GridOutput();


    constructor() { this.GridData = GridDefs; }

    public buildGrid() {
        const coreSettings : GridInit   = this.Settings;
        const gridData     : GridType[] = this.GridData;

        const w: number     = multiply( coreSettings.Size.Width,  coreSettings.Size.PixelRatio );
        const h: number     = multiply( coreSettings.Size.Height, coreSettings.Size.PixelRatio );
        const o: string     = checkOrientation( w, h );
        const c: CellSpecs  = calcCell( o, w );
        const t: GridType   = gridData.find( a => a.GridName == coreSettings.GridStyle );

        const cols: string  = calcArea( t.Columns, c );
        const rows: string  = calcArea( t.Rows, c );

        this.Grid.GridCode  = cols + '/' + rows + ';';
        this.Grid.GridAreas = t.Areas;
    }
}

应用程序组件/任何顶级容器的辅助类

export class SiteGrid extends GridBuilder {

    constructor(){
        super();
        this.applySizeSettings();
    }

    applySizeSettings(){
        this.Settings.Size.Width       = window.innerWidth;
        this.Settings.Size.Height      = window.innerHeight;
        this.Settings.Size.PixelRatio  = window.devicePixelRatio;
    }
}

AppComponent

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent extends SiteGrid {
    title = 'app';

    @HostListener( 'window: resize', [ '$event' ] )onResize( event ){ this.applySizeSettings(); this.buildGrid(); }

    constructor(){
        super();
        this.Settings.GridStyle = 'SiteGridA';
        this.buildGrid();
    }
}

我不知道这在帮助找出解决方案方面有多重要，但我想知道事情是如何流动的。有人知道为什么会出现这种警告吗？

Answer 1

您需要实施清洁剂来清洁您的css，或绕过它......

constructor(private sanitizer: DomSanitizer) {
    this.sanitizedCSS = sanitizer.bypassSecurityTrustStyle(Grid.GridCode) ;
  }

至于为什么，这个blog解释得非常好，DomSanitizer文档也是如此。

DomSanitizer通过清理值以在不同的DOM上下文中安全使用来帮助防止跨站点脚本安全漏洞（XSS）。

绑定到＆＃39; style.grid＆＃39;抛出不安全的风格价值＆＃39;警告

1 个答案: