PrimeNG beta 15 Angular 2 DataTable 未使用样式呈现

Question

我在让 PrimeNG DataTable 在我的网络应用程序上正确呈现时遇到问题。目前，显示如下...

在我的 package.json 依赖项部分看起来像这样

"dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "@angular2-material/button": "^2.0.0-alpha.8-2",
    "@angular2-material/core": "^2.0.0-alpha.8-2",
    "@angular2-material/input": "^2.0.0-alpha.8-2",
    "@angular2-material/card": "^2.0.0-alpha.8-2",
    "@angular2-material/toolbar": "^2.0.0-alpha.8-2",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "^0.19.38",
    "zone.js": "^0.6.23",
    "primeng": "^1.0.0-beta.15"
  },

摘自我的 systemjs.config.js 文件

var map = {
        'app': 'app', // 'dist',
        '@angular': 'lib/@angular',
        'rxjs': 'lib/rxjs',
        '@angular2-material': 'lib/@angular2-material',
        'primeng': 'lib/primeng'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        '@angular2-material/core': { main: 'core.umd.js', defaultExtension: 'js' },
        '@angular2-material/button': { main: 'button.umd.js', defaultExtension: 'js' },
        '@angular2-material/input': { main: 'input.umd.js', defaultExtension: 'js' },
        '@angular2-material/card': { main: 'card.umd.js', defaultExtension: 'js' },
        '@angular2-material/toolbar': { main: 'toolbar.umd.js', defaultExtension: 'js' },
        'primeng': { defaultExtension: 'js' }
    };

app.module.ts 文件

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

import { LoginFormComponent } from './login-form.component';
import { OrganizationGroupComponent } from './organization-group/organization-group.component';
import { HomeComponent } from './home.component';
import { LoginService } from './login.service';
import { OrganizationGroupService } from './organization-group/organization-group.service';
import { AuthGuard } from './authguard';
import { routing } from './app.routing';
import { MdButtonModule } from '@angular2-material/button';
import { MdInputModule } from '@angular2-material/input';
import { MdCardModule } from '@angular2-material/card';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { DataTableModule } from 'primeng/primeng';



@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing,
        MdButtonModule,
        MdInputModule,
        MdCardModule,
        MdToolbarModule,
        DataTableModule
    ],
    declarations: [
        AppComponent,
        LoginFormComponent,
        HomeComponent,
        OrganizationGroupComponent
    ],
    providers: [
        LoginService,
        AuthGuard,
        OrganizationGroupService
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

我的HTML文件

<div>
    <p-dataTable [value]="organizationGroups" [lazy]="true" [rows]="10" [paginator]="true"
                 [totalRecords]="totalRecords" (onLazyLoad)="loadOrganizationGroupsLazy($event)">
        <header>List of OrganizationGroups</header>
        <p-column field="Id" header="Id"></p-column>
        <p-column field="Name" header="Name"></p-column>
    </p-dataTable>
</div>

我的组件声明

@Component({
    selector: 'organization-group',
    templateUrl: 'app/organization-group/organization-group.html',
    styleUrls: [
        'lib/primeng/resources/themes/omega/theme.css',
        'lib/primeng/resources/primeng.min.css',
        'app/font-awesome.min.css'
    ]
})

我好像看到正在加载样式表（下面的控制台输出）

关于为什么输出看起来未格式化且未应用样式的任何想法？

我尝试降级到 Angular2 RC 6，但结果相同。不知道我错过了什么。我可以在 Angular2 发布时使用最新版本的 PrimeNG 吗？

Answer 1

安装 PrimeUI 并将以下 CSS 添加到您的 index.html:

<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />

Answer 2

我需要从外部（布局）页面加载 css 文件，一切正常。出于某种原因，我无法使用组件的 styleUrls 数组。

<link rel="stylesheet" href="lib/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" href="lib/primeng/resources/primeng.min.css" />
<link rel="stylesheet" href="app/font-awesome.min.css" />

PrimeNG beta 15 Angular 2 DataTable 未使用样式呈现

PrimeNG beta 15 Angular 2 DataTable not rendering with styling

primeng

angular