Angular 4の動的に注入されたhtml div要素に適用されないCSS値
Angularカレンダーアプリケーションが正常に実行されています。エラーは発生していません。しかし、ここで直面している問題は、CSSスタイルがページに適用されないことです。
私はこれを個別に実装し、うまく機能しました。しかし、私がそれをangular 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>")
}
}
} );
}
}
}
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）を参照するスタイルが機能していない// ..
これはCSSのカプセル化の問題だと思います。デフォルトでは、angularはEmulatedカプセル化を使用します。これにより、コンポーネント内のすべてのDOM要素に属性が適用され、CSSルールにその属性が追加されます。htmlを動的に挿入しているため、 angularではなく、その属性は動的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 ）