Html 不应用 angular2 的主要 ng 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38338342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
prime ng styles not applying angular2
提问by Miguel Rosales
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-2It 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:
嗨，我刚开始使用 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>
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/';
}
回答by Keifer Caebe
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,
} ...
回答by gtzinos
Open your style.css file and import the styles.
打开 style.css 文件并导入样式。
@import '../node_modules/primeng/resources/themes/omega/theme.css';
@import '../node_modules/primeng/resources/primeng.min.css';
回答by danmc
I wouldn't turn off ViewEncapsulation as your styles could bleed out and potentially cause issues in the rest of your application.
我不会关闭 ViewEncapsulation，因为您的样式可能会溢出并可能导致应用程序的其余部分出现问题。
I'd recommend using the /deep/ selector to force a style down through the child component tree. This can be applied on a Class by Class basis or to multiple Classes, as below.
我建议使用 /deep/ 选择器通过子组件树强制向下传递样式。这可以应用于逐个类或多个类，如下所示。
A single Class
单班
:host #{"/deep/"} .yourStyle1 {
color: #ffffff;
}
Multiple Classes
多个班级
:host #{"/deep/"} {
.yourStyle1 { color: #ffffff; }
.yourStyle2 { color: #000000; }
}
More Info: https://angular.io/docs/ts/latest/guide/component-styles.html
更多信息：https: //angular.io/docs/ts/latest/guide/component-styles.html
回答by Sanket
Have you included primeNG css and one of the theme in your index.html?
您是否在 index.html 中包含了 primeNG css 和主题之一？
<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" />
See if this helps.
看看这是否有帮助。
回答by Markus Pscheidt
Add the necessary CSS files to the stylessection of your .angular-cli.json:
将必要的 CSS 文件添加到styles您的部分.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"
//...
],
See also PrimeNg Setup, section "Styles Configuration".
另请参阅PrimeNg 设置，“样式配置”部分。
回答by md asif husain Jeelani
your syntax is wrong.
你的语法是错误的。
In place of
代替
<button type="button" pButton icon="fa-plus" style="float:left" (click)="showDialogToAdd()" label="Add"></button>
see the change in style syntax
查看样式语法的变化
you should use
你应该使用
<button type="button" pButton icon="fa-plus" [style]="{'float':'left'}" (click)="showDialogToAdd()" label="Add"></button>
