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
1条答案
按热度按时间1rhkuytd1#
我认为这是css封装的问题。默认情况下angular使用
Emulated
封装。这将一个属性应用到组件中的所有DOM元素并将该属性添加到css规则中。由于动态注入html而不是通过angular,这个属性没有被添加到你的动态html中。你可以使用None
选项。这样angular就不会把这个属性添加到你的css规则中。注意,现在你的css不会只为这个组件封装,它将可用于你的整个应用。
视图上的文档封装:https://angular.io/api/core/ViewEncapsulation
这是一篇关于ViewEncapsulation(https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html)的好文章