web-dev-qa-db-ja.com

Angular 2でstyleUrlが機能しない

System_JSでAngular 2を使用し、コンポーネントにスタイルシートを追加しようとしています。
SystemJS Iを使用しているので 相対パスは使用できません 現在、コンポーネントのテンプレートURLとスタイルURLの絶対パスを使用しています。
ただし、インラインスタイルは正常に機能します（つまりstyles: ['h1 {font-size: 12px; }']）

コンポーネントは次のようになります。

@Component({
    selector: 'dashboard',
    templateUrl: '/app/components/dashboard/dashboard.html',
    styleUrls: ['/app/components/dashboard/dashboard.css']
})

スタイルシートdashboard.cssは読み込まれません（エラーも返されません）。

enter image description here



ツールのバージョン：

〜angular 2: 2.0.0-beta.6
〜systemjs: 0.19.20
〜TypeScript: 1.8.0

angularsystemjsangular2-template
29
rakeen

次のように、styleUrlsパスの先頭からスラッシュを削除するだけです。

@Component({
    selector: 'dashboard',
    templateUrl: '/app/components/dashboard/dashboard.html',
    styleUrls: ['app/components/dashboard/dashboard.css']
})
35
thomallen

プロジェクトでPrimeNGまたはAngular Materialを使用している場合、styleUrlはこのようには機能しません。 ViewEncapsulationをインポートし、@ component定義にカプセル化：ViewEncapsulation.Noneを配置する必要があります。

import { Component, Output, Input, ViewEncapsulation} from '@angular/core';

@Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'message-center',
   templateUrl: './messagecenter.component.html',
   styleUrls: ['./messagecenter.component.css']
})
8
Jasmin Akther Suma

Angular 2のドキュメントによると、 SystemJSは__moduleName変数を公開しています CommonJSのmodule.idと同じように相対名に必要です...試しましたか？

declare var __moduleName: any;
@Component({
    moduleId: __moduleName,
    selector: 'dashboard',
    templateUrl: 'dashboard.html',
    styleUrls: ['dashboard.css']
})
7
Gonzalo Lucero

Heroesチュートリアルでも同じ問題が発生しました。 moduleIdは問題を解決しました：

@Component({
  moduleId: module.id, // this is the key
  selector: 'my-dashboard',
  templateUrl: 'dashboard.component.html',
  styleUrls: ['dashboard.component.css']
})

ModuleIdがなければ、インラインスタイルとテンプレートのみが機能します。

3
boskicthebrain

StyleUrls：plunkerサンプルを実装しようとしました。それは私のために働いた。

私は次を使用しました：

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app-root.style.css']
})

ファイルapp.component.tsおよびapp-root.style.cssを確認します

https://plnkr.co/edit/z6tl8o0b8cJ6zGofKfmF?p=preview

2
Sayed Wakil

このため、末尾のスラッシュなどを削除する必要はありません。実際、私もこの間違いをしており、htmlページはcssファイルとリンクしていませんでした。

実際、私は愚かな間違いをしていた：htmlページとして：

<img src="../../assets/images/logo.png" alt="LOGO" class="responsive-img login-logo-width">

cssファイルとして：

login-logo-width {
   width: 260px;
}

私が得ていたエラー：この検査は未知のCSSセレクターを検出し、それらをクラスまたはIDとして宣言する機能を提供します

ですから、あなたがしなければならないhtiongは、次のようにhtmlファイルで宣言したものをidまたはclassにパラメータを定義します：

.login-logo-width {
    width: 260px;
}
0
NARGIS PARWEEN

index.htmlがappの上のフォルダーにある限り、スタイルurlは正しく見えます。

また、htmlマークアップでは、クラスをスタイルで必要なものに設定する必要があります。

0
foxjazzHack

@ boskicthebrainのソリューションからmoduleIdを使用した現在のファイルへの相対パスが機能しました。

ただし、私はwebpackを使用しているため、この場合のcssファイルはraw-loader（style-loader/css-loaderの組み合わせではなく、スタイルローダーはサーバー側のAOT用ではありません）、angularに動作させます。

最後に、::ng-deep演算子は非推奨であり、スタイルの範囲は非常に制限されているため、すべてをダンプし、上部のシンプルなインポートimport './my-component.component.css';を使用しました。component.tsファイル。これにはglobal CSSであると同時に、コンポーネントがロードされるという利点があります。

0
George