Внешний стиль Angular 2 не встраивается в заголовок

У меня есть это определение компонента в машинописном тексте:

import {Component, ViewEncapsulation} from 'angular2/core';

@Component({
    selector: 'my-app',
    templateUrl: '/views/sandbox.html',
    styleUrls: ['/styles/sandbox.css'],
    styles: [`.wow { background-color: red; }`],
    encapsulation: ViewEncapsulation.Emulated
})
export class SandBox { }

Согласно этой статье: http://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html стиль в разделе стилей и во внешней таблице стилей должен быть встроен в заголовок с помощью angular.

К сожалению, второй не вводится, angular вводит только тот, что находится в разделе стилей.

Я попытался получить доступ к /styles/sandbox.css из браузера, все в порядке. Angular также может получить доступ к /views/sandbox.html, поэтому я понятия не имею, почему этого не происходит.

Я использую: "angular2": "2.0.0-beta.2" (последняя бета-версия AFAIK)


angular css angular2-template
person Marcell    schedule 03.02.2016    source источник
comment
Внедряется ли он при удалении свойства styleUrls?   -  person Poul Kruijt    schedule 04.02.2016
comment
«Стили» всегда вводятся. Это другой, которого нет.   -  person Marcell    schedule 04.02.2016
comment
Разве вы не можете просто убрать первую косую черту в своем абсолютном URL-адресе, чтобы он выглядел так styles/sandbox.css? Это сработало для меня.   -  person RVP    schedule 30.03.2016

Ответы (3)


arrow_upward
10
arrow_downward

Я сделал несколько тестов и, как ни странно, стили из sandbox.css применяются только в том случае, если вы используете относительные пути в атрибуте styleUrls:

@Component({
  selector: 'my-app',
  templateUrl: '/views/sandbox.html',
  styleUrls: ['../styles/sandbox.css'],
  styles: [`.wow { background-color: red; }`],
  encapsulation: ViewEncapsulation.Emulated
})
export class AppComponent {
  constructor() {
  }
}

Изменить

После просмотра исходного кода Angular2 запрещает использовать абсолютный путь для файла styleUrls. Смотрите эту строку:

Надеюсь, это поможет вам, Тьерри.

person Thierry Templier    schedule 04.02.2016
comment
Это работает, спасибо! Однако мне интересно, является ли это ошибкой... поскольку абсолютный URL-адрес работает с 'templateUrl', но не с 'styleUrls' - person Marcell; 05.02.2016
comment
После просмотра исходного кода есть тест, который не позволяет использовать это... Я обновил свой ответ. - person Thierry Templier; 05.02.2016
comment
Я добавил проблему в репозиторий angular по этому поводу: github.com/angular/angular/issues/6905 . Жду от них ответа ;-) - person Thierry Templier; 05.02.2016

arrow_upward
1
arrow_downward

Лучший способ исправить это — использовать другой файл css для вашего компонента и добавить его в список StyleUrls. Более чистый и будет масштабироваться по мере роста ваших компонентов.

person C B    schedule 04.02.2016

arrow_upward
0
arrow_downward

Вы можете использовать загрузчик зависимостей модулей systemjs и commonjs для загрузки шаблонов, стилей и других файлов.

в commonjs moduleId : module.id в systemJs __moduleName

import {Component} from '@angular/core';

@Component({

moduleId:module.id,
selector: "exf-header",
templateUrl: "header.html",
styleUrls:['header.css']

})

export class HeaderComponent {

}
person Pir Abdul    schedule 23.11.2016