3

AngularDart コンポーネントのスタイルを設定する最良の方法は何だろうと思っていました。@import基本スタイルを別の CSS ファイルに分割し、コンポーネントに何らかの方法で (Angular dart がサポートしている場合)含めることができるようにしたいと考えています。

StandardNgComponentでは、次の例のように CSS ファイルを 1 回だけ追加できます。

@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 ファイルにスタイルをコピーして貼り付ける必要はありません)。

AngularDart 環境内でコンポーネントと css を構成する最良の方法は何ですか?

4

3 に答える 3

4

以下に示すように、属性 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>
于 2013-12-03T19:59:53.463 に答える
0

ここを見ると：

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

コンポーネントの .dart ファイルには、属性 cssUrl を含む注釈があります。よくわかりませんが、これにより、ファイルがカプセル化された Web コンポーネント 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'
    }
)

この packages/ リンクが機能するには、ファイルを /lib フォルダーに置く必要があることに注意してください。

于 2013-12-01T13:01:39.170 に答える