Как стилизовать компонент AngularDart, используя в конечном итоге несколько файлов CSS

Мне было интересно, как лучше всего стилизовать компоненты AngularDart? Я хотел бы иметь возможность разделить базовые стили в отдельный файл CSS, а затем просто как-то включить его (возможно, @import, если angular dart поддерживает это) в свой компонент.

Стандартный NgComponent позволяет мне добавить только один файл CSS, как в следующем примере:

@NgComponent(
  selector: 'rating',
  templateUrl: 'packages/angular_dart_demo/rating/rating_component.html',
  cssUrl: 'packages/angular_dart_demo/rating/rating_component.css',
  publishAs: 'ctrl',
  map: const {
    'max-rating': '@maxRating',
    'rating': '<=>rating'
})

Что, если мой CSS каким-то образом разделен на несколько файлов, как мне включить их все в компонент?

На данный момент я начинаю замечать, что, хотя компоненты AngularDart помогают сделать компоненты повторно используемыми, они не самые удобные в обслуживании - в CSS есть много копипаста. Если бы можно было разделить стили, компоненты были бы намного более удобными в обслуживании (т.е. можно было бы включать базовые стили в несколько компонентов - вместо того, чтобы копировать и вставлять их в каждый файл css для каждого компонента).

Как лучше всего структурировать компоненты и CSS в среде AngularDart?


dart css angularjs shadow-dom angular-dart
person markovuksanovic    schedule 01.12.2013    source источник
comment
Почему проблема с этим Дротиком? Используйте семантическое пространство имен - дайте элементам один класс baseComponent и несколько дополнительных классов по мере необходимости.   -  person David Souther    schedule 02.12.2013
comment
Я согласен дать элементам разные классы. Но поскольку я хочу повторно использовать один и тот же класс в разных элементах NgComponent, у меня нет другого выхода, кроме как скопировать вставку или создать один гигантский файл css и поместить все туда, а затем включить этот файл в каждый компонент - что является неприятным подходом. Или, может быть, вы знаете, как этого добиться? @ Дэвид Южный   -  person markovuksanovic    schedule 03.12.2013
comment
Стилус / sass / меньше. (Я понятия не имею, как работают AngularDart и NgComponent - я любитель кофе. Мне просто немного странно, что в CSS полностью отсутствует модульность.)   -  person David Souther    schedule 03.12.2013

Ответы (3)


arrow_upward
4
arrow_downward

Атрибут cssUrl и applyAuhtorStyles можно применять одновременно, как показано ниже. Как видите, помимо наследования родительских стилей (например, начальной загрузки), вы также можете добавить стили для конкретных компонентов (cssUrl), которые доступны только в области действия компонента.

@NgComponent(
selector: 'paginate',
templateUrl: 'component/paginate/paginate_component.html',
cssUrl: 'component/paginate/paginate_component.css',
applyAuthorStyles: true,
publishAs: 'ctrl',
map: const {
  'page-filter-map' : '<=>pageFilterMap'
}

)

Также можно использовать директивы cssStyle для добавления еще большего контроля, также показанные ниже.

<span ng-style="{color:'red'}">Sample Text</span>
person user3063024    schedule 03.12.2013
comment
По-прежнему не решает проблему. Стили автора приходят извне, и мне нужно, чтобы все стили были изолированы внутри компонента. - person markovuksanovic; 04.12.2013

arrow_upward
1
arrow_downward

Хорошо, вот и ответ. Чтобы добавить CSS в компонент, вы можете использовать

  1. @import в вашем CSS
  2. Параметр cssUrls - https://github.com/angular/angular.dart/pull/315 < / а>
person markovuksanovic    schedule 13.12.2013

arrow_upward
0
arrow_downward

Если вы посмотрите сюда:

https://github.com/angular/angular.dart.tutorial/tree/master/Chapter_04/lib/rating

В файле .dart компонента есть аннотация, содержащая атрибут cssUrl. Я не уверен, но я думаю, что это связывает файл с инкапсулирующим веб-компонентом css.

@NgComponent(
    selector: 'rating',
    templateUrl: 'packages/angular_dart_demo/rating/rating_component.html',
    cssUrl: 'packages/angular_dart_demo/rating/rating_component.css',
    publishAs: 'ctrl',
    map: const {
      'max-rating' : '@maxRating',
      'rating' : '<=>rating'
    }
)

Обратите внимание, что для того, чтобы эта ссылка на пакеты / работала, вам необходимо, чтобы ваши файлы находились в папке / lib.

person bbs    schedule 01.12.2013
comment
Я это уже видел. Мои вопросы больше похожи на то, есть ли у меня способ каким-то образом определить стили в нескольких файлах css и каким-то образом включить их все в компонент. - person markovuksanovic; 02.12.2013
comment
Я не думаю, что для этого есть возможность, похоже, кандидат на запрос функции на Angular.dart GitHub, хотя компоненты предназначены для изоляции. Я думаю, что единственный способ решить эту проблему сейчас - заменить cssUrl в аннотации на applyAuthorStyles: true. - person bbs; 02.12.2013