CSS值不適用於Angular 4中動態注入的html div元素

Question

Codepen鏈接

我有一個運行良好的Angular日歷應用程序。 沒有任何錯誤。 但是我在這里面臨的問題是CSS樣式沒有應用到頁面上。

我單獨實現了它，並且工作正常。 但是當我將其包含在我的角度CSS中時不起作用。 （我在這里面臨的問題是我不知道如何引用包含內容的“ div”）。

我在下面分享我的代碼：

holiday.ts

@Component({
  //template: ``,
  templateUrl: './holidays.component.html',
  styleUrls: ['./../../../webroot/css/pages/holidays/only_holidays.min.css'],
  styles: [`



  `],
})
export class HolidaysPageComponent extends AppComponent {


  ngOnInit(){
    this.testFunction();
  }


  testFunction() {

    $(function() {
      function c() {
          p();
          var e = h();
          var r = 0;
          var u = false;
          l.empty();
          while (!u) {
              if (s[r] == e[0].weekday) {
                  u = true
              } else {
                  l.append('<div class="blank"></div>');
                  r++
              }
          }
          for (var c = 0; c < 42 - r; c++) {
              if (c >= e.length) {
                  l.append('<div class="blank"></div>')
              } else {
                  var v = e[c].day;
                  var m = g(new Date(t, n - 1, v)) ? '<div class="today">' : "<div>";
                  l.append(m + "" + v +"<div class='eventsPrint e-day-"+v+"'></div></div>");

              }
          }
          var y = o[n - 1];
          a.css("background-color", y).find("h1").text(i[n - 1] + " " + t);
          f.find("div").css("color", y);
          l.find(".today").css("background-color", y);
          d()
      }

      function h() {
          var e = [];
          for (var r = 1; r < v(t, n) + 1; r++) {
              e.push({
                  day: r,
                  weekday: s[m(t, n, r)]
              })
          }
          return e
      }

      function p() {
          f.empty();
          for (var e = 0; e < 7; e++) {
              f.append("<div>" + s[e].substring(0, 3) + "</div>")
          }
      }

      function d() {
          var t;
          var n = $("#calendar").css("width", e + "px");
          n.find(t = "#calendar_weekdays, #calendar_content").css("width", e + "px").find("div").css({
              width: e / 7 + "px",
              height: e / 7 + "px",
              "line-height": e / 7 + "px"
          });
          n.find("#calendar_header").css({
              height: e * (1 / 7) + "px"
          }).find('i[class^="icon-chevron"]').css("line-height", e * (1 / 7) + "px")
      }

      function v(e, t) {
          return (new Date(e, t, 0)).getDate()
      }

      function m(e, t, n) {
          return (new Date(e, t - 1, n)).getDay()
      }

      function g(e) {
          return y(new Date) == y(e)
      }

      function y(e) {
          return e.getFullYear() + "/" + (e.getMonth() + 1) + "/" + e.getDate()
      }

      function b() {
          var e = new Date;
          t = e.getFullYear();
          n = e.getMonth() + 1
      }

      var e = 480;
      var t = 2013;
      var n = 9;
      var r = [];
      var i = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
      var s = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
      var o = ["#16a085", "#1abc9c", "#c0392b", "#27ae60", "#FF6860", "#f39c12", "#f1c40f", "#e67e22", "#2ecc71", "#e74c3c", "#d35400", "#2c3e50"];
      var u = $("#calendar");
      var a = u.find("#calendar_header");
 // console.log(a[0]);
 ///=============================================================================================================================

    eventUpdater();

  //==============================================================================================================================
    var f = u.find("#calendar_weekdays");
    var l = u.find("#calendar_content");
    b();
    c();
    a.find('i[class^="icon-chevron"]').on("click", function() {
        var e = $(this);
        var r = function(e) {
            n = e == "next" ? n + 1 : n - 1;
            if (n < 1) {
                n = 12;
                t--
            } else if (n > 12) {
                n = 1;
                t++
            }
            c()
        };
        if (e.attr("class").indexOf("left") != -1) {
            r("previous")
        } else {
            r("next")
        }
        ///=============================================================================================================================

    eventUpdater();

  //==============================================================================================================================
    })
  })

  function eventUpdater(){
    let iM = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
    setTimeout( ()=>{
      let cald=$('#calendar_header h1').html();
      cald=cald.split(" ");
      let MM=cald[0]; let YY=cald[1];
      let curMonth=iM.indexOf(MM);
      if(curMonth){
      console.log( $('#calendar_header h1' ).html() , iM.indexOf(MM) ,YY  );
        $(".eventsPrint").html(''); //clearing all event display
        if(curMonth==8 && YY==2017){
          $(".e-day-26").html("<ul><li>Event 1</li><li>Event 2</li></ul>")
        }

      }
    } );
  }
  }

}

only_holidays.css

body{
  background-color: #F5F1E9;
}
#calendar{
  margin-left: auto;
  margin-right: auto;
  width: 520px;
  font-family: 'Lato', sans-serif;
}
#calendar_weekdays div{
  display:inline-block;
  vertical-align:top;
}
#calendar_content, #calendar_weekdays, #calendar_header{
  position: relative;
  width: 520px;
  overflow: hidden;
  float: left;
  z-index: 10;
}
#calendar_weekdays div, #calendar_content div{
  width:50px;
  height: 40px;
  overflow: hidden;
  text-align: center;
  background-color: #FFFFFF;
  color: #787878;
}
#calendar_content{
  -webkit-border-radius: 0px 0px 12px 12px;
  -moz-border-radius: 0px 0px 12px 12px;
  border-radius: 0px 0px 12px 12px;
}
#calendar_content div{
  float: left;
}
#calendar_content div:hover{
  background-color: #F8F8F8;
}
#calendar_content div.blank{
  background-color: #E8E8E8;
}
#calendar_header, #calendar_content div.today{
  zoom: 1;
  filter: alpha(opacity=70);
  opacity: 0.7;
}
#calendar_content div.today{
  color: #FFFFFF;
}
#calendar_header{
  width: 100%;
  height: 37px;
  text-align: center;
  background-color: #FF6860;
  padding: 18px 0;
  -webkit-border-radius: 12px 12px 0px 0px;
  -moz-border-radius: 12px 12px 0px 0px;
  border-radius: 12px 12px 0px 0px;
}
#calendar_header h1{
  font-size: 1.5em;
  color: #FFFFFF;
  float:left;
  width:70%;
}

引用（div）的樣式不起作用// ..

https://codepen.io/deepakpookkote/pen/xXRNao

Answer 1

我相信這是一個CSS封裝問題。 默認情況下，angular使用Emulated封裝。 這會將屬性應用於組件中的所有DOM元素，並將該屬性添加到CSS規則中。 由於您是動態而不是通過角度注入html，因此該屬性不會添加到動態html中。 您可以使用“ None選項。 這樣，角度不會將屬性添加到CSS規則中。

import { ViewEncapsulation } from '@angular/core';

@Component({
  templateUrl: './holidays.component.html',
  styleUrls:['./../../../webroot/css/pages/holidays/only_holidays.min.css'],
  encapsulation: ViewEncapsulation.None
})

注意，現在您的css不會僅為此組件封裝。 您的整個應用都可以使用。

ViewEncapsulation上的文檔： https ://angular.io/api/core/ViewEncapsulation

這是一篇關於ViewEncapsulation的好文章（ https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html ）