CSS値は、私は罰金を実行している角度のカレンダーアプリケーションを持っている

Question

Codepen Link

アンギュラ4に動的に注入されたHTMLのdiv要素を上適用しません。エラーなし。しかし、私がここで直面している問題は、CSSスタイルがページに適用されていないことです。

これを別途実装し、正常に動作しています。しかし、私はそれを私の角に含めるとCSSが機能していない。 （私がここで直面している問題は、コンテンツを含む 'div'をどのように参照するのかわからないということです）。

私は以下の私のコードを共有しています：

holidays.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>") 
     } 

     } 
    }); 
    } 
    } 

} 

を（DIV）動作していないを意味し、これまでのスタイル

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%; 
} 

only_holidays.css // ..

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

Answer 1

これはCSSのカプセル化の問題だと思います。デフォルトでは、角度はEmulatedのカプセル化を使用します。これにより、コンポーネントのすべてのDOM要素に属性が適用され、その属性がCSSルールに追加されます。あなたはHTMLを動的に注入するので、動的HTMLには追加されません。 Noneオプションを使用できます。このように、angleはあなたの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）