0
私はangular4を使用しているので、私のCSSはもう動作しません。私はangular4を使用しているので、私のCSSはもう動作しません。
現在、アプリの基本テンプレートを作成していますが、生成されたコンポーネントDOM要素がAngularのため、DIVSに正しく適用されていないCSSでいくつかの問題があります。
これはこれは
<!doctype html>
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta charset="utf-8" />
<title>Pages - Admin Dashboard UI Kit - Blank Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<link rel="apple-touch-icon" href="pages/ico/60.png">
<link rel="apple-touch-icon" sizes="76x76" href="pages/ico/76.png">
<link rel="apple-touch-icon" sizes="120x120" href="pages/ico/120.png">
<link rel="apple-touch-icon" sizes="152x152" href="pages/ico/152.png">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta content="" name="description" />
<meta content="" name="author" />
<base href="/">
<!--[if lte IE 9]>
<link href="assets/plugins/codrops-dialogFx/dialog.ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!-- jQuery -->
<script type="text/javascript" src="/assets/plugins/jquery/jquery-1.11.1.min.js" ></script>
</head>
<body class="fixed-header">
<app-root></app-root>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="/assets/plugins/pace/pace-theme-flash.css" />
<link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrapv3/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/assets/plugins/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="/assets/plugins/jquery-scrollbar/jquery.scrollbar.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/assets/plugins/select2/css/select2.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/assets/plugins/switchery/css/switchery.min.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/assets/pages/css/pages-icons.css">
<link rel="stylesheet" type="text/css" href="/assets/pages/css/pages.css" class="main-stylesheet"/>
<!--<link rel="stylesheet" type="text/css" href="/assets/pages/condensed/css/pages.css" class="main-stylesheet"/>-->
<link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap3-wysihtml5/bootstrap3-wysihtml5.min.css"/>
<link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap-tag/bootstrap-tagsinput.css"/>
<link rel="stylesheet" type="text/css" href="/assets/plugins/dropzone/css/dropzone.css"/>
<link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap-datepicker/css/datepicker3.css" media="screen">
<link rel="stylesheet" type="text/css" href="/assets/plugins/summernote/css/summernote.css" media="screen">
<link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" media="screen">
<link rel="stylesheet" type="text/css" href="/assets/plugins/bootstrap-timepicker/bootstrap-timepicker.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="/assets/plugins/jquery-datatable/media/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/assets/plugins/jquery-datatable/extensions/FixedColumns/css/dataTables.fixedColumns.min.css"/>
<link rel="stylesheet" type="text/css" href="/assets/plugins/datatables-responsive/css/datatables.responsive.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/assets/css/style.css"/>
<link rel="stylesheet" type="text/css" href="/assets/elium-style/css/elium.css"/>
<link rel="stylesheet" type="text/css" href="/assets/elium-style/css/pages.css"/>
</body>
</html>
<div class="page-container ">
<div class="page-content-wrapper">
<div class="content">
<router-outlet>
Content here
</router-outlet>
</div>
<ae-footer-composant>
<div class="container-fluid container-fixed-lg footer">
Footer here
</div>
</ae-footer-composant>
</div>
</div>
（1）
<div class="page-container ">
<div class="page-content-wrapper">
<div class="content">
Content here
</div>
<div class="container-fluid container-fixed-lg footer">
Footer here
</div>
</div>
</div>
です
これは私のCSSは、私は（1）ではなく、（2）ので、角度の生成されたDOMの...
とで動作します
<!-- START PAGE-CONTAINER -->
<div class="page-container ">
<!-- START HEADER -->
<ae-header-composant></ae-header-composant>
<!-- START PAGE CONTENT WRAPPER -->
<div class="page-content-wrapper">
<div class="content">
<router-outlet></router-outlet>
</div>
<ae-footer-composant></ae-footer-composant>
</div>
<!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTAINER -->
<ae-quickview-composant></ae-quickview-composant>
<ae-overlay-composant></ae-overlay-composant>
<ae-css-composant></ae-css-composant>
私app.component.htmlです既に次のように試してみましたが、まだ動作していません。
import { Component, OnInit, ViewEncapsulation} from '@angular/core';
@Component({
selector: 'ae-sidebar-composant',
templateUrl: './sidebar-composant.component.html',
styleUrls: ['./sidebar-composant.component.css'],
encapsulation: **ViewEncapsulation.None**,
})
export class SidebarComposantComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
誰も考えがありますか？ ありがとうございました
なぜあなたはindex.htmlを内のすべてのコンポーネントを持っています？モジュールロード時にブートストラップされるルートコンポーネントはどれですか。 – Aravind
親子関係はありますか？ –
あなたのCSSはどの角度バージョンで動作しましたか？ CSSの外観はそれ以上は機能しません。 –