angular2の2つの異なるページに異なる背景画像を表示する方法は？

私はホームページや他のページで別々の背景イメージを使用する必要がある角度2のアプリケーションを持っています。私はindex.htmlにイメージを適用して背景イメージを持っていますが、別のイメージを別のページに追加する必要があります。これは私のコードですangular2の2つの異なるページに異なる背景画像を表示する方法は？

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <base href="/"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 

    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
    <script src="resources/js/semantic.min.js"></script> 
<script src="resources/js/slideshow.js"></script> 
    <link rel="stylesheet" type="text/css" class="ui" href="resources/css/semantic.css" /> 
    <link rel="stylesheet" type="text/css" class="ui" href="resources/css/angularSwitch.css" /> 
    <link rel="stylesheet" type="text/css" class="ui" href="resources/css/main.css" /> 
    <link href="resources/css/datepicker3.css" rel="stylesheet" type="text/css"> 
    <link href="resources/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
<link href="resources/css/styles.css" rel="stylesheet" type="text/css"> 
<script src="resources/js/jquery-1.11.1.min.js"></script> 
    <script src="resources/js/bootstrap.min.js"></script> 
    <script src="resources/js/chart.min.js"></script> 
    <script src="resources/js/chart-data.js"></script> 
    <script src="resources/js/easypiechart.js"></script> 
    <script src="resources/js/easypiechart-data.js"></script> 
    <script src="resources/js/bootstrap-datepicker.js"></script> 
    <script> 
<!--Icons--> 
<script src="resources/js/lumino.glyphs.js"></script> 
</head> 
<body style="background-image: url("resources/static/pic/slide_1.jpg");" > 

    <app-root></app-root> 
</body> 
</html>

これを達成する方法を教えてください。

出典

2017-01-11 kirti

index.htmlの代わりにコンポーネントレベルで背景イメージを適用するのはどうですか？次に、各構成要素は異なる背景画像を有することができる。あなたも、このようなコードのスニペットが含まれて別のcssファイルかもしれない：

body { background-image: url("resources/static/pic/slide_1.jpg"); }

をし、その背景画像上に表示する各コンポーネント「styleUrls」に含めます。別のイメージを使用するコンポーネントには、別のCSSを使用します。

ホープこれはそれが不可能である

出典

2017-01-11 15:42:33 aholtry

を助け、本体のみHTMLで 'body'要素が、他のものは身体の内側に配置するだけで配列され、部品の各CSSに追加'body {..}'シーケンスは要素の表示方法に関するいくつかの問題を作成します= –

angular2の2つの異なるページに異なる背景画像を表示する方法は？

答えて

関連する問題