web-dev-qa-db-fra.com

styles d'amorçage n'appliquant pas angular2

Bonjour, je viens de commencer à travailler avec angular 2. J'ai trouvé cette bibliothèque PrimeNG, j'ai suivi ce tutoriel: http://blog.davincisoftware.sk/primeng-web-component-framework-based-on-angularjs-2 Tout fonctionne, sauf les styles . Ils ne s'appliquent pas d'une manière ou d'une autre et je ne sais vraiment pas quoi faire. voici à quoi ressemble ma table:  primeNG datatable 

<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>

Ci-dessus est mon modèle.

De plus, je ne comprends pas trop comment appliquer mes propres classes sur leurs éléments.

C’est ma classe de composants (j’ai également essayé de supprimer l’attribut styles dans le composant Decorator.

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/';

  }
htmlangularprimeng
9
Miguel Rosales

Vous devez désactiver l'encapsulation pour le composant. 

Le concept de base est que chaque composant masque ses styles aux autres composants afin de ne pas se remplacer. Vous pouvez en savoir plus sur l'encapsulation ici .

...
import { ..., ViewEncapsulation } from '@angular/core';

@Component {
    ...
    encapsulation: ViewEncapsulation.None,
} ...
22
Keifer Caebe

Ouvrez votre fichier style.css et importez les styles.

@import '../node_modules/primeng/resources/themes/omega/theme.css';
@import '../node_modules/primeng/resources/primeng.min.css';
15
gtzinos

Avez-vous inclus primeNG css et l’un des thèmes dans votre 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" />

Voir si cela aide.

7
Sanket

Je ne désactiverais pas ViewEncapsulation, car vos styles risqueraient de disparaître et de causer des problèmes dans le reste de votre application.

Je vous recommande d'utiliser le sélecteur/deep/pour forcer un style dans l'arborescence des composants enfants. Ceci peut être appliqué classe par classe ou à plusieurs classes, comme indiqué ci-dessous.

Une seule classe

:Host #{"/deep/"} .yourStyle1 {
    color: #ffffff; 
}

Classes multiples

:Host #{"/deep/"} {

     .yourStyle1 { color: #ffffff; }

     .yourStyle2 { color: #000000; }
}

Plus d'infos: https://angular.io/docs/ts/latest/guide/component-styles.html

6
danmc

Ajoutez les fichiers CSS nécessaires à la section styles de votre .angular-cli.json:

"styles": [
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/primeng/resources/primeng.min.css",
    "../node_modules/primeng/resources/themes/omega/theme.css"
    //...
],

Voir aussi PrimeNg Setup , section "Styles Configuration".

4
Markus Pscheidt