CSS值不适用于Angular 4中的动态注入的html div元素 [英] CSS values not applying on dynamically injected html div elements in Angular 4
问题描述
我有一个运行良好的Angular日历应用程序.没有任何错误.但是我在这里面临的问题是CSS样式没有被应用到页面上.
I have an Angular calendar application that is running fine. without any errors. But the problem I'm facing here is the CSS styles are not getting applied to the page.
我单独实施了此程序，并且工作正常.但是，当我将其包含在我的角度CSS中时，它不起作用. (我在这里面临的问题是我不知道如何引用包含内容的"div".)
I implemented this separately and its working fine. But when I include it in my angular css is not working. (The problem I'm facing here is I don't know to how to refer the 'div' that contain the contents).
我在下面共享我的代码:
I'm sharing my code below:
holidays.ts
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
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)的样式均无效/..
which ever styles that refers to (div) is not working//..
https://codepen.io/deepakpookkote/pen/xXRNao
推荐答案
我相信这是一个CSS封装问题.默认情况下，angular使用Emulated封装.这会将属性应用于组件中的所有DOM元素，并将该属性添加到CSS规则中.由于您是动态注入HTML而不是通过角度注入，因此该属性不会添加到动态html中.您可以使用None选项.这样，angular不会将属性添加到CSS规则中.
I believe this is a css encapsulation issue. By default angular uses the Emulated encapsulation. This applies an attribute to all the DOM elements in your component and adds that attribute to your css rules. Since you are injecting html dynamically and not through angular, that attribute it not being added to your dynamic html. You can use the None option. This way angular doesn't add the attribute to your css rules.
import { ViewEncapsulation } from '@angular/core';
@Component({
templateUrl: './holidays.component.html',
styleUrls:['./../../../webroot/css/pages/holidays/only_holidays.min.css'],
encapsulation: ViewEncapsulation.None
})
注意，现在您的css不会仅为此组件封装.它可用于您的整个应用程序.
Note, now your css won't be encapsulated for just this component. It'll be available to your entire app.
有关ViewEncapsulation的文档: https://angular.io/api/core/ViewEncapsulation
Docs on ViewEncapsulation: https://angular.io/api/core/ViewEncapsulation
Here is a good article on ViewEncapsulation (https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html)
这篇关于CSS值不适用于Angular 4中的动态注入的html div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
