javascript - CSS 值不适用于 Angular 4 中动态注入(inject)的 html div 元素

Question

Codepen Link

我有一个运行良好的 Angular 日历应用程序。没有任何错误。但我在这里面临的问题是 CSS 样式没有应用到页面。

我单独实现了这个并且工作正常。但是当我将它包含在我的 Angular css 中时，它不起作用。 (我在这里面临的问题是我不知道如何引用包含内容的“div”)。

我在下面分享我的代码:

假期.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 规则中。由于您是动态注入(inject) html 而不是通过 Angular 注入(inject)，因此该属性不会被添加到您的动态 html 中。您可以使用 None 选项。这样 angular 就不会将该属性添加到您的 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 )