javascript - 从 Angular 中的 api 导入样式

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 类中的样式属性吗？这样我就可以将新样式推送到数组中。或者我可以将 api 样式保存在一个变量中并将样式属性设置为该变量吗？

Answer 1

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

[ngStyle]="customCssProperties"

在这里你可以传递像

这样的属性

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