css - 使用 Angular 2+ 将 CSS 从字符串动态加载到您的组件

Question

我想动态加载我的 html 代码和 css 代码。加载 html 代码工作正常，但我不知道如何动态注入(inject) CSS。

因此我写了以下组件:

import { Component, Input } from '@angular/core';
import { Injectable, Inject } from '@angular/core';
import { Http, URLSearchParams } from '@angular/http';
import { APP_BASE_HREF } from '@angular/common';
import { ORIGIN_URL } from '../../shared/constants/baseurl.constants';
import { HttpClient } from '@angular/common/http';
import { DynamicComponentData } from './dynamic-component.data';
import { Observable } from 'rxjs/Observable';
import { TransferHttp } from '../../../modules/transfer-http/transfer-http';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  template: `
  <div [innerHTML]="html"> </div>

  `
})
export class DynamicHTMLComponent implements DynamicComponentData {
  html: any;
  css: any;
  constructor(
    @Inject(DOCUMENT) private document,
    private http: HttpClient,
    private _sanitizer: DomSanitizer,
    private transferHttp: TransferHttp,
    @Inject(ORIGIN_URL) private baseUrl: string) {
    this.getHTML();
    this.getCSS();
  }

  @Input() data: any;

  getHTML() {
    this.http.get(`${this.baseUrl}/HTML.txt`, { responseType: 'text' })
      .subscribe(data => this.html = this._sanitizer.bypassSecurityTrustHtml(data));
  }

  getCSS() {
    this.http.get(`${this.baseUrl}/CSS.txt`, { responseType: 'text' })
      .subscribe(data => this.css = this._sanitizer.bypassSecurityTrustHtml(data));
  }}

HTML.txt的内容是

 <input id="name" name="name">

我的CSS.txt的内容是

input {background:red}

Answer 1

你可以随时获取文件路径并注入(inject)DOM

document.getElementByTagName('link').href="..............."

服务器返回的文件路径