CSS值不适用于Angular 4中动态注入的html div元素
Posted
技术标签:
【中文标题】CSS值不适用于Angular 4中动态注入的html div元素【英文标题】：CSS values not applying on dynamically injected html div elements in Angular 4 【发布时间】：2018-03-06 08:01:08 【问题描述】：Codepen Link
我有一个运行良好的 Angular 日历应用程序。没有任何错误。但我在这里面临的问题是 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>")
);
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
【问题讨论】：
你能提供 plunker 或 stackblitz 的例子来告诉我们这个问题吗？ plnkr.co/edit/w2FVfKlWP72pzXIsfsCU?p=info ..这是我的代码@yurzui 抱歉，这里没有日历 codepen.io/deepakpookkote/pen/xXRNao ：-你能检查一下这个链接并告诉我如何在角度中做到这一点..当我单独做它的工作时..但是在角度 css 中不能正常工作@ yurzui .. 请看plnkr.co/edit/mCldcxqZom8L4OSSiUyz?p=preview 【参考方案1】：我相信这是一个 css 封装问题。默认情况下，角度使用 Emulated 封装。这会将属性应用于组件中的所有 DOM 元素，并将该属性添加到您的 css 规则中。由于您是动态注入 html 而不是通过角度注入，因此该属性不会添加到您的动态 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)
【讨论】：
：-非常感谢您提供宝贵的信息和帮助。css encapsulation issue的答案很真实，也解决了我在Vue.js中的类似问题
@LLai 感谢您的解决方案。在 Angular 12 中工作以上是关于CSS值不适用于Angular 4中动态注入的html div元素的主要内容，如果未能解决你的问题，请参考以下文章
jQueryMobile 'data-scroll=true' 不适用于动态注入的页面
Routerlinkactive在Angular 8中的页面加载时不适用于动态生成的路由
Angular 7 TestBed.overrideProvider 不适用于 ActivateRoute