初始化不适用于angular2的样式 [英] prime ng styles not applying angular2

问题描述

你好我刚开始使用angular 2.我发现这个库PrimeNG，我遵循这个教程：

 < div class = content-wrapper fullscreen-override> 
< section class =content-header> 
< H1>用户< / H1> 
< / section> 
 
< section class =content> 
< div class =row col-lg-10 center> 
< div class =box box-primary> 
  
     
< footer> 
< div class =ui-helper-clearfixstyle =width：100％> 
< button type =buttonpButton icon =fa-plusstyle =float：left（click）=showDialogToAdd（）label =Add>< / button> 
< button type =buttonpButton icon =fa-pencil-square-ostyle =float：left（click）=showDialogToEdit（）[disabled] =selectedUser == null标签= 编辑 >< /按钮> 
< button type =buttonpButton icon =fa-closestyle =float：left（click）=delete（）[disabled] =selectedUser == nulllabel =Delete >< /按钮> 
< / div> 
< / footer> 
< / p-dataTable> 
 
 < 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 =buttonpButton icon =fa-check（click）=save（）label =Save>< / button> 
< / div> 
< / footer> 
< / p-dialog> 
< / div> 
< / div> 
< / section> 
< / div> 
  

以上是我的模板。

，我不太了解如何在自己的元素上应用我自己的类。

这是我的组件类（我也尝试删除装饰器组件中的styles属性

 从'@ angular / router'导入{Router}; 
从'@angular'导入{Component，OnInit} / core'; 
从'@ angular / router'导入{ROUTER_DIRECTIVES}; 
从'./modal_forms/creation/users.forms.creation'导入{UsersFormCreation}; 
导入{DataTable ，
 Column，
 TabPanel，
 TabView，
标题，
页脚，
对话框，
按钮，
 InputText}从'primeng / primeng'; 
从'../../common/request.service'导入{RequestService}; 
从'./user'导入{User}; 
 
 const template = require（'./ users.template.html'）; 
 const style = require（'./ style.cs s'）; 
 
 @Component（{
 selector：'dashboardUsers'，
 template：template，
 providers：[RequestService]，
 directives： [
 ROUTER_DIRECTIVES，
 DataTable，
 Column，
 TabPanel，
 TabView，
标题，
页脚，
对话框，
 Button，
 InputText] 
 styles：[style] 
}）
导出类DashboardUsersComponent实现OnInit {
 response：string; 
 api_path：string; 
用户：用户[]; 
 cols：any; 
 displayableUser：User = new DisplayableUser（）; 
 selectedUser：User; 
 displayDialog：boolean; 
 newUser：boolean; 
 count：number; 
 next：string; 
上一个：string; 
 
构造函数（public router：Router，public requestService：RequestService）{
 this.api_path ='http://127.0.0.1:8000/users/'; 
 
 
  

解决方案

关闭组件的封装。

基本概念是，每个组件都隐藏了其他组件的样式，因此它们不会相互覆盖。您可以阅读更多关于封装此处。

  ... 
从'@ angular / core'导入{...，ViewEncapsulation}; 
 
 @Component {
 ... 
封装：ViewEncapsulation.None，
} ... 
  

Hi I just started working with angular 2. I found this library PrimeNG, I followed this tutorial: http://blog.davincisoftware.sk/primeng-web-component-framework-based-on-angularjs-2 It it all works, except the styles. They're not applying somehow and I really don't know what to do. here's what my table looks like:

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

Above is my template.

Also, I don't quite understand how to apply my own classes on their elements.

This is my component class( I ve also tried removing the styles attribute in the decorator Component

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

  }

解决方案

You need to turn off encapsulation for the component.

The basic concept is that each component hides it's styles from other component so they don't overwrite each other. You can read more about encapsulation here.

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

@Component {
    ...
    encapsulation: ViewEncapsulation.None,
} ...

这篇关于初始化不适用于angular2的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！