こんにちは、私はangular 2.で作業を始めました。このライブラリPrimeNGを見つけました。このチュートリアルに従いました。 http://blog.davincisoftware.sk/primeng-web-component-framework -based-on-angularjs-2 スタイルを除き、すべて機能します。何とか適用されず、どうすればよいかわかりません。ここに私のテーブルは次のように表示されます。
<div class="content-wrapper fullscreen-override">
<section class="content-header">
<H1>Users</H1>
</section>
<section class="content">
<div class="row col-lg-10 center">
<div class="box box-primary">
<p-dataTable [(value)]="users" selectionMode="single" [(selection)]="selectedUser" (onRowSelect)="onRowSelect($event)" rows="5" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" [globalFilter]="gb" [responsive]="true">
<p-column field="email" header="email" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>
<p-column field="first_name" header="first_name" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>
<p-column field="last_name" header="last_name" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>
<p-column field="is_superuser" header="is_superuser" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>
<footer>
<div class="ui-helper-clearfix" style="width:100%">
<button type="button" pButton icon="fa-plus" style="float:left" (click)="showDialogToAdd()" label="Add"></button>
<button type="button" pButton icon="fa-pencil-square-o" style="float:left" (click)="showDialogToEdit()" [disabled]="selectedUser == null" label="Edit"></button>
<button type="button" pButton icon="fa-close" style="float:left" (click)="delete()" [disabled]="selectedUser == null" label="Delete"></button>
</div>
</footer>
</p-dataTable>
<p-dialog header="User details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true">
<div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="displayableUser">
<div class="ui-grid-row">
<div class="ui-grid-col-4"><label for="email">email</label></div>
<div class="ui-grid-col-8"><input pInputText id="email" [(ngModel)]="displayableUser.email" /></div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4"><label for="name">first_name</label></div>
<div class="ui-grid-col-8"><input pInputText id="first_name" [(ngModel)]="displayableUser.first_name" /></div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4"><label for="surname">last_name</label></div>
<div class="ui-grid-col-8"><input pInputText id="last_name" [(ngModel)]="displayableUser.last_name" /></div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4"><label for="country">is_superuser</label></div>
<div class="ui-grid-col-8"><input pInputText id="is_superuser" [(ngModel)]="displayableUser.is_superuser" /></div>
</div>
</div>
<footer>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<button type="button" pButton icon="fa-check" (click)="save()" label="Save"></button>
</div>
</footer>
</p-dialog>
</div>
</div>
</section>
</div>
上記は私のテンプレートです。
また、要素に独自のクラスを適用する方法がよくわかりません。
これは私のコンポーネントクラスです(デコレータコンポーネントのstyles属性を削除しようとしました
import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { UsersFormCreation } from './modal_forms/creation/users.forms.creation';
import {DataTable,
Column,
TabPanel,
TabView,
Header,
Footer,
Dialog,
Button,
InputText} from 'primeng/primeng';
import { RequestService } from '../../common/request.service';
import {User} from './user';
const template = require('./users.template.html');
const style = require('./style.css');
@Component({
selector: 'dashboardUsers',
template: template,
providers: [RequestService],
directives: [
ROUTER_DIRECTIVES,
DataTable,
Column,
TabPanel,
TabView,
Header,
Footer,
Dialog,
Button,
InputText]
styles: [style]
})
export class DashboardUsersComponent implements OnInit {
response: string;
api_path: string;
users: User[];
cols: any;
displayableUser: User = new DisplayableUser();
selectedUser: User;
displayDialog: boolean;
newUser: boolean;
count: number;
next: string;
previous: string;
constructor(public router: Router, public requestService: RequestService) {
this.api_path = 'http://127.0.0.1:8000/users/';
}
コンポーネントのカプセル化をオフにする必要があります。
基本的な概念は、各コンポーネントが他のコンポーネントからスタイルを隠し、相互に上書きしないようにすることです。カプセル化の詳細については、こちらをご覧ください こちら 。
...
import { ..., ViewEncapsulation } from '@angular/core';
@Component {
...
encapsulation: ViewEncapsulation.None,
} ...
Style.cssファイルを開き、スタイルをインポートします。
@import '../node_modules/primeng/resources/themes/omega/theme.css';
@import '../node_modules/primeng/resources/primeng.min.css';
あなたのスタイルがにじみ、アプリケーションの残りの部分で問題を引き起こす可能性があるため、ViewEncapsulationをオフにしません。
/ deep /セレクターを使用して、子コンポーネントツリーでスタイルを強制的に下げることをお勧めします。これは、以下のように、クラスごとに適用することも、複数のクラスに適用することもできます。
単一のクラス
:Host #{"/deep/"} .yourStyle1 {
color: #ffffff;
}
複数のクラス
:Host #{"/deep/"} {
.yourStyle1 { color: #ffffff; }
.yourStyle2 { color: #000000; }
}
詳細: https://angular.io/docs/ts/latest/guide/component-styles.html
Index.htmlにprimeNG cssとテーマの1つを含めましたか?
<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" />
これが役立つかどうかを確認してください。
必要なCSSファイルを.angular-cli.json
のstyles
セクションに追加します。
"styles": [
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/primeng/resources/themes/omega/theme.css"
//...
],
PrimeNg Setup 、セクション「スタイル設定」も参照してください。