视图模板中的角度创建样式标记？

发布时间：2020-12-17 17:57:01 所属栏目：安全来源：网络整理

导读：我想创建一个通用的html片段组件.我们的想法是将html片段存储在db中的某个地方,以及应该应用于它们的样式. 我可以轻松地设置innerHtml以将html结构插入到我的视图模板中的基本元素中,但是如何动态插入 style在我的视图模板中标记？这就是我所拥有的： @Comp

我想创建一个通用的html片段组件.我们的想法是将html片段存储在db中的某个地方,以及应该应用于它们的样式.

我可以轻松地设置innerHtml以将html结构插入到我的视图模板中的基本元素中,但是如何动态插入< style>在我的视图模板中标记？

这就是我所拥有的：

@Component({
    moduleId: module.id,selector: 'htmlFragment',styleUrls: ['html-fragment.css'],templateUrl:'html-fragment.html'
})

export class HtmlFragmentComponent {

    @Input() htmlContent: string;
    @Input() styleContent: string;
}

这是视图模板：

<style [innerHTML]="styleContent"></style>
<div [innerHTML]="htmlContent"></div>

然后我试着像这样使用它：

<htmlFragment [htmlContent]='dHtml' [styleContent]="sHtml"></htmlFragment>

哪里：

dHtml: string = '<div>hello this is html<ul><li>bla bla</li><li>bla bla 2</li></ul></div>';
    sHtml: string = 'ul{list-style-type: none;}';

html片段在这里正确注入：

<div [innerHTML]="htmlContent"></div>

但是这里的样式元素：

<style [innerHTML]="styleContent"></style>

工作不对.有没有办法做到这一点？

解决方法

它不能在模板本身中完成(Angular模板编译器不允许它,并且只删除任何< style>标记),但它可以在组件内以编程方式完成：

ngOnInit() {
  const css = 'a {color: pink;}';
  const head = document.getElementsByTagName('head')[0];
  const style = document.createElement('style');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(css));
  head.appendChild(style);
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!