простые стили, не применяющие angular2

Привет, я только начал работать с 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 в компоненте 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/';

  }
 Miguel Rosales12 июл. 2016 г., 23:19
Я переместил свои CSS-файлы из каталога node_modules / primeui в общедоступный контейнер и применил несколько стилей. Я сделал chmod 777 для этой папки, но он мало что сделал. По какой-то причине мои стили (стили Primeui) не загружаются.

Ответы на вопрос(6)

Решение Вопроса

Основная концепция заключается в том, что каждый компонент скрывает свои стили от другого компонента, поэтому они не перезаписывают друг друга. Вы можете прочитать больше об инкапсуляцииВот.

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

@Component {
    ...
    encapsulation: ViewEncapsulation.None,
} ...
 Nylon Smile06 янв. 2017 г., 05:39
Это сработало для меня, пытался установить .ui-datagrid-content дляprimefaces.org/primeng/#/datagrid и это не сработало
 Miguel Rosales13 июл. 2016 г., 00:22
Это не сработало, это текущий поток моего приложения app.ts-> dashboard.ts-> dashboard.users-> Я также пытался добавить ViewEncapsulation в компонент dashboard.ts, не помогло
 Himanshu Arora04 авг. 2017 г., 19:21
Установка ViewEncapsulation в none не является правильным решением. Делая это, вы отключаете использование Shadow DOM от Angular, который является одной из наиболее важных и мощных функций Angular. Делая это, вы уходите от компонентного программирования. ИМО почти никогда не бывает причин для этого. Вы должны использовать `: host / deep /`, чтобы применить стили к дочернему дереву или легкому дереву вашего компонента.
 Keifer Caebe04 авг. 2017 г., 20:29
Я согласен, что полное удаление инкапсуляции не является идеальным решением. Обратите внимание, что / deep /, >>> и :: ng-deepуже не рекомендуется в последней версии Angular, Кроме того, / Deep / и >>> являютсяне рекомендуется в Chrome, Если вы хотите использовать решение для пирсинга теней: ng-deep - лучший способ сделать это, так как он поддерживается командой angular, по крайней мере, на данный момент, и не зависит от поддержки браузера.

Добавьте необходимые файлы 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"
    //...
],

Смотрите такжеPrimeNg Setup, раздел «Настройка стилей».

ваш синтаксис неправильный.

На месте

<button type="button" pButton icon="fa-plus" style="float:left" (click)="showDialogToAdd()" label="Add"></button>
увидеть изменение в синтаксисе стиля

ты должен использовать

<button type="button" pButton icon="fa-plus" [style]="{'float':'left'}" (click)="showDialogToAdd()" label="Add"></button>
 khaled4vokalz29 окт. 2017 г., 08:39
стиль является атрибутом HTML ... почему это не сработает?

Включили ли вы PrimeNG 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" />

Посмотрите, поможет ли это.

 tengen13 июл. 2017 г., 19:14
Ссылка могла измениться с тех пор, как было предложено это решение, но для PrimeNg 4.1.0 структура каталогов и наименование для меня требовали, чтобы я ссылался на них как: "primeng / resources / themes / omega / theme.css" "primeng / resources / primeng. min.css»
 Sanket13 июл. 2016 г., 13:25
Это упоминается на их странице настройки -primefaces.org/primeng/#/setup (Ищите раздел Зависимости)

Откройте ваш файл style.css и импортируйте стили.

@import '../node_modules/primeng/resources/themes/omega/theme.css';
@import '../node_modules/primeng/resources/primeng.min.css';
 gtzinos16 мая 2018 г., 12:04
Это способ, которым вы разработали свое приложение. Это решение работает в большинстве случаев.
 Akyo16 мая 2018 г., 16:25
Хм ... У меня была проблема с официальным упражнением на англоязычных источниках "Тур героев", и я мог исправить интеграцию тематики простых чисел только с этим решением.
 Akyo16 мая 2018 г., 10:06
Странно, но это решение сработало для меня, хотя я следовал именно за страницей установки, почему я делаю что-то не так, чтобы у меня работало только это решение, особенно из-за того, что эта строка нигде не упоминается в документации ...?

поскольку ваши стили могут истекать и потенциально вызывать проблемы в остальной части вашего приложения.

Я бы порекомендовал использовать / deep / selector для принудительного перемещения стиля вниз по дереву дочерних компонентов. Это может быть применено на основе класса за классом или для нескольких классов, как показано ниже.

Единый класс

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

Несколько классов

:host #{"/deep/"} {

     .yourStyle1 { color: #ffffff; }

     .yourStyle2 { color: #000000; }
}

Больше информации:https://angular.io/docs/ts/latest/guide/component-styles.html

Ваш ответ на вопрос