Question

我想从API获取样式，并根据该样式呈现组件。

import { Component } from '@angular/core';
import { StyleService } from "./style.service";
import { Style } from "./models/style";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [``]
})

export class AppComponent {
  header: boolean;
  footer: boolean;
  style: string;
  constructor(private styleService: StyleService) {}

  ngOnInit() {
    this.logStyles()
  }

  logStyles() {
    this.styleService.getStyles({
      business: 'sekeh'
    })
    .subscribe(
      (val) => {
        this.header = val.header,
        this.footer = val.footer,
        this.style = val.style
      },
      response => {
        console.log("POST call in error", response);
      },
      () => {
        console.log("The POST observable is now completed.");
      });
    }
  }

我有两个问题。我可以访问AppComponent类中的style属性吗？这样我就可以将新样式推入数组。还是我可以将api样式保存在变量中并将样式属性设置为该变量？

Answer 1

您可以使用NgStyle更新包含HTML元素的样式。设置一个或多个样式属性，指定为以冒号分隔的键/值对

[ngStyle]="customCssProperties"

您可以在此处传递

之类的属性

customCssProperties = {
        "padding-top": "5px",
        "margin-left": "5px",
        "color": "red"
      }

Answer 2

您可以使用必须经过消毒的[style]="dynamicStyles"。这样，您可以动态设置样式。更多https://angular.io/api/platform-browser/DomSanitizer

在Angular中从api导入样式

2 个答案: