如何将样式表动态插入到Angular组件中

时间:2019-05-02 10:31:11

标签: angular

我有一个REST服务器,可以在单独的请求中为我提供

  • SVG
  • 可用于设置SVG样式的样式表

我正在尝试编写一个可以捕获两个响应并将它们组合在一起的样式化的SVG的角度组件。我在此处放置了一个伪代码组件,以尝试解释我尝试过和失败的内容。

@Component({
  selector: 'svger',
  template: '<style>CAN'T INTERPOLATE HERE - SEE POINT 1</style>
             <svg>DOWNLOADED SVG</svg>',
  styles: ['CAN I MODIFY THIS DIRECTLY - SEE POINT 2']
})
export class SvgerComponent implements OnInit {
    @Input() svgURL;
    @Input() cssURL;
}

我考虑过/尝试过的事情

  1. 我希望我可以直接将一个值插入到'style'标签中,但这是行不通的,因为'style'标签被抬起了头(据我所知)。
  2. 我曾考虑过尝试直接更改组件的[styles]注释,但这似乎被认为是错误的(t​​m)-也许无论如何在浏览时都不可用。
  3. 在AngularJS时代,我最终会放手并调用$ compile进行标签的插值,但找不到与Angular6等效的标签
  4. 我已经读过有关直接修改DOM的内容,但是我总是不愿意进入框架的内部。

我将非常感谢任何指示或经验。

只需明确提出问题即可:

如何从一个http调用中获取SVG,从另一个HTTP调用中获取CSS文件,并使用角度组件显示样式化的SVG?

0 个答案:

没有答案