如何解决不出现primeng样式 schedule.component.htmlangular.jsonpackage.jsonschedule.component.ts
我正在使用primeng,但样式有点不显示。我在组件中添加了一个简单的网格,结果如下图所示。我删除了 node_modules
并再次 npm install
,但没有任何变化。
我不知道我还能错过什么。基本上,我从 getting started 页开始做了所有事情。
schedule.component.html
<div class="p-grid">
<div class="p-col-4">4</div>
<div class="p-col">1 </div>
<div class="p-col">1 </div>
<div class="p-col">1 </div>
<div class="p-col">1 </div>
<div class="p-col">1 </div>
<div class="p-col">1 </div>
<div class="p-col">1 </div>
<div class="p-col">1 </div>
</div>
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {
"academic-schedule": {
"projectType": "application","schematics": {
"@schematics/angular:application": {
"strict": true
}
},"root": "","sourceRoot": "src","prefix": "app","architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser","options": {
"outputPath": "dist/academic-schedule","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "tsconfig.app.json","aot": true,"assets": [
"src/assets"
],"styles": [
"node_modules/primeng/resources/themes/fluent-light/theme.css","node_modules/primeng/resources/primeng.min.css","node_modules/primeicons/primeicons.css","node_modules/primeflex/primeflex.css","src/styles.scss"
],"scripts": []
},"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
}
],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"budgets": [
{
"type": "initial","maximumWarning": "500kb","maximumError": "1mb"
},{
"type": "anyComponentStyle","maximumWarning": "2kb","maximumError": "4kb"
}
]
}
}
},"serve": {
"builder": "@angular-devkit/build-angular:dev-server","options": {
"browserTarget": "academic-schedule:build"
},"configurations": {
"production": {
"browserTarget": "academic-schedule:build:production"
}
}
},"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n","options": {
"browserTarget": "academic-schedule:build"
}
},"test": {
"builder": "@angular-devkit/build-angular:karma","options": {
"main": "src/test.ts","codeCoverage": true,"tsConfig": "tsconfig.spec.json","karmaConfig": "karma.conf.js","styles": [
"node_modules/primeicons/primeicons.css","node_modules/primeng/resources/themes/saga-blue/theme.css","node_modules/@fullcalendar/core/main.min.css","node_modules/@fullcalendar/daygrid/main.min.css","node_modules/@fullcalendar/timegrid/main.min.css","scripts": []
}
}
}
}
},"defaultProject": "academic-schedule","schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},"cli": {
"analytics": false
}
}
package.json
{
"name": "academic-schedule","version": "0.0.0","scripts": {
"ng": "ng","start": "ng serve","build": "ng build","test": "ng test","format:check": "prettier \"src/{app,environments}/**/*{.ts,.html,.json,.scss}\" --check","format:write": "prettier \"src/{app,.scss}\" --write"
},"private": true,"dependencies": {
"@angular/animations": "^12.1.1","@angular/common": "^12.1.1","@angular/compiler": "^12.1.1","@angular/core": "^12.1.1","@angular/forms": "^12.1.1","@angular/platform-browser": "^12.1.1","@angular/platform-browser-dynamic": "^12.1.1","@angular/router": "^12.1.1","@fullcalendar/core": "^4.1.0","@fullcalendar/daygrid": "^4.1.0","@fullcalendar/interaction": "^4.1.0","@fullcalendar/timegrid": "^4.1.0","jwt-decode": "^3.1.2","primeflex": "^2.0.0","primeicons": "^4.1.0","primeng": "^12.0.0","rxjs": "^6.6.7","tslib": "^2.3.0","zone.js": "^0.11.4"
},"devDependencies": {
"@angular-devkit/build-angular": "^12.1.1","@angular/cli": "^12.1.1","@angular/compiler-cli": "^12.1.1","@angular/language-service": "^12.1.1","@types/jasmine": "^3.7.7","@types/node": "^16.0.0","jasmine-core": "^3.8.0","karma": "^6.3.4","karma-chrome-launcher": "^3.1.0","karma-coverage": "~2.0.3","karma-jasmine": "^4.0.1","karma-jasmine-html-reporter": "^1.6.0","prettier": "^2.3.2","typescript": "^4.3.5"
}
}
schedule.component.ts
import { Component,OnInit } from '@angular/core';
import dayGridplugin from '@fullcalendar/daygrid';
import timeGridplugin from '@fullcalendar/timegrid';
import interactionPlugin,{ Draggable } from '@fullcalendar/interaction';
@Component({
selector: 'app-add-schedule',templateUrl: './add-schedule.component.html',styleUrls: ['./add-schedule.component.scss']
})
export class AddScheduleComponent implements OnInit {
events!: any[];
options: any;
theCheckBox: boolean = false;
constructor() { }
ngOnInit() {
let draggableEl = document.getElementById('external-events')!;
var self = this;
new Draggable(draggableEl,{
itemSelector: '.fc-event',eventData: function (eventEl: any) {
console.log(eventEl);
if (self.theCheckBox) {
eventEl.parentNode.removeChild(eventEl);
}
return {
title: eventEl.innerText
};
}
});
this.events = [
{
id: 1,title: 'All Day Event',start: '2017-02-01'
},{
id: 2,title: 'Long Event',start: '2017-02-07',end: '2017-02-10'
},{
id: 3,title: 'Repeating Event',start: '2017-02-09T16:00:00'
}
];
this.options = {
plugins: [dayGridplugin,timeGridplugin,interactionPlugin],defaultDate: '2017-02-01',header: {
left: 'prev,next',center: 'title',right: 'dayGridMonth,timeGridWeek,timeGridDay'
},editable: true
};
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。