2

スタイルをロードしないこのコンポーネントがあります。ただし、テンプレートは正しく読み込まれます。

// client/imports/navbar/navbar.ts
import {Component} from "@angular/core";
@Component({
    selector: 'navbar',
    templateUrl: 'client/imports/navbar/navbar.html',
    styleUrls: ['client/imports/navbar/navbar.css']
})
export class Navbar {}

これまでのところ、私は試しました：

  • base hrefの設定/client/index.html
  • ブートストラップにbase hrefat base コンポーネントを注入する/client/app.ts
  • スタイルをロードする:

styleUrls: [ '/client/imports/navbar/navbar.css', 'client/imports/navbar/navbar.css', 'imports/navbar/navbar.css', './navbar.css', 'navbar.css' ]

ただし、ルート フォルダー内のコンポーネントは問題なくスタイルを読み込みます。

// client/app.ts
import {Component} from "@angular/core";
@Component({
    selector: 'app',
    templateUrl: 'client/app.html',
    styleUrls: ['app.css']
})
export class AppComponent{}

私はすでにそれを知っています：

  • Angular スタイルは相対パスをサポートしていません
  • パスはスラッシュで始めてはいけません/
  • SystemJs (Meteor) を使用しているため、パスはルートを参照する必要があります。

でもとにかくやってみました。

アップデート：

Moular にする唯一の方法は、次のように同じテンプレート html ファイル内でスタイルを宣言することです。

 <style>
   .my-class{
       ...
   }
 </style>
 <div class="my-class">
      ...
 </div>
4

1 に答える 1

1

現時点での問題は*.css、ビルドによってすべてのファイルがマージされ、それが を介してロードされるhttp://localhost:3000/merged-stylesheets.css?hash=somethingため、この名前のグローバル スタイルが取得されますが、Angular のコンポーネント ローカル スタイルは取得されないことです。

私の次の例を考えてみましょう：

@Component({
    templateUrl: 'client/home.component.html',
    styleUrls: [ 'client/home.component.css' ]
})
export class HomeComponent extends MeteorComponent {

に CSS への追加のネットワーク リクエストclient/home.component.cssが表示されますが、残念ながらコンテンツを見ると、これは「ルート」リクエストとして扱われ、CSS のコンテンツではなくページ全体が返されます。

編集:これに対してすでに問題が提出されているようです: https://github.com/Urigo/angular2-meteor/issues/270

回避策:

usingstyleUrlsは CSS をオンデマンドでロードするため、後で使用できるようにする必要があります。public/したがって、流星プロジェクトのフォルダーに配置できます。私の例の場合、css は に配置する必要がありますpublic/client/home.component.css。

于 2016-05-20T14:26:05.023 に答える