Question

我试图从变量调用css而不是硬编码。

在我的pageview.html

下面

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Full screen sections with CSS</title>
      <!--<link rel="stylesheet" href="./assets/files/css/style.css">-->
      {{template_skeleton_top_param}} 
</head>

<body>
...//my content
</body>
</html>

{{template_skeleton_top_param}}的值为<link rel="stylesheet" href="./assets/files/css/style.css">

我的pageview.ts

ngOnInit() {
this.template_skeleton_top_param = '<link rel="stylesheet" href="./assets/files/css/style.css">';
}

为什么我的css没有使用此加载。请帮忙。

从变量调用时，它没有加载。如果硬编码，它就会生效。在console.log（）;变量的值也很好。我无法找到不加载的原因。

编辑1：粘贴我的整个组件并制作了一个视频，以清楚地了解发生的事情：

export var myValue:any = null;

import { Component, OnInit, ElementRef,Renderer2,Inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DOCUMENT } from '@angular/platform-browser';

declare var $: any; //intentional use of jQuery

@Component({
  selector: 'app-editsection',
  templateUrl: './editsection.component.html',
  styleUrls: ['./editsection.component.css']
})


export class EditsectionComponent implements OnInit {
public array_no1;
public dataArray;
public section_desc;
public get_template_skeleton; 
public template_skeleton_top_param;
public template_skeleton_top_param_test;
private contentEditable: boolean = false;

section: {id: number};

  constructor(
    @Inject(DOCUMENT) private document: any,
    private route: ActivatedRoute,
  private elRef: ElementRef,
  private el: ElementRef,
  private rd: Renderer2
  ) { }

  ngAfterViewInit() {
  this.el.nativeElement.innerHtml;      
}

  ngOnInit() {
    // insert the template code 
this.get_template_skeleton  = JSON.parse(localStorage.getItem("templateType"));

this.template_skeleton_top_param_test = this.get_template_skeleton['template_code2'];
//console.log(this.template_skeleton_top_param_test);

this.template_skeleton_top_param = '<link rel="stylesheet" href="./assets/files/css/style.css">';
console.log(this.template_skeleton_top_param);

//this.document.body.innerHTML += this.get_template_skeleton.template_code2; //injecting HTML HERE
//this.document.body.innerHTML += "saurabh";
this.section = {id: this.route.snapshot.params['id']};
 var keys = Object.keys(localStorage).filter(function(key) {
  return /^section\d+$/.test(key);
});

 var dataArray = keys.map(function(key) {
 return JSON.parse(localStorage.getItem(key));
});

for(var i=0;i<dataArray.length;i++){
    var array_no = dataArray[i];
}
 this.array_no1 = dataArray;
let obj2 = this.array_no1.find(obj2 => obj2.id == this.section.id);
this.section_desc = obj2.description;
//this.document.getElementById("main-wrapper").innerHTML = this.section_desc;  //injecting HTML HERE
//this.document.getElementById("main-wrapper").innerHTML += "abc";
  }

 selectDiv() {
     //create a new HTMLElement from nativeElement
    var hElement: HTMLElement = this.elRef.nativeElement;

    //now you can simply get your elements with their class name
  // var allDivs = hElement.getElementsByClassName('container')[0];
var getSection = document.getElementById("main-wrapper").innerHTML;


    console.log("hii");
  //  console.log(allDivs);
    console.log(getSection);
   // $("h1[contenteditable='false']").attr('contenteditable', true)
   this.contentEditable = true;

  }

  DontEdit(){
    this.contentEditable = false;
  }

  //for clone
  clone(){
    console.log("Clone function here");
  }
   button2(){
    console.log("button2 function here");
  }


  // code for right click context menu
  rightPanelStyle: Object = {};

  detectRightMouseClick($event) {
    // disabling the default browser window which comes on right click
    document.addEventListener('contextmenu', event => event.preventDefault());

       if($event.which === 3) {
            this.rightPanelStyle = {'display':'block','left':$event.clientX + 'px','top':$event.clientY + 'px'};
            return false;
       }
  }

  closeContextMenu() {
      this.rightPanelStyle = {'display':'none'};
  }

}

视频链接 - http://youtu.be/G_dAxijYRGY?hd=1

component.html {{cssURL}}上的二进制值，但css未加载

0 个答案: