javascript - 包含组件的奇怪行为Angular 6
问题描述
我购买了一个在 HTML + CSS 简单项目方法上运行良好的主题，但我想将其转换为 Angular 6 项目。
我设法让主题在 Angular 6 上正常工作，但是在 Angular 6 应用程序中查看我的代码时，我得到了一个奇怪的 CSS 行为：
<!-- begin:: Page -->
<div class="m-grid m-grid--hor m-grid--root m-page">
<m-header *ngIf="showContent"></m-header>
<!-- begin::Body -->
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
<m-leftmenu></m-leftmenu>
<div *ngIf="showContent" #mContentWrapper>
<router-outlet></router-outlet>
</div>
</div>
<m-footer></m-footer>
</div>
<!-- end:: Page -->
<!-- begin::Scroll Top -->
<div id="m_scroll_top" class="m-scroll-top">
<i class="la la-arrow-up"></i>
</div>
<!-- end::Scroll Top -->
这是我的 PainelComponent ( painel.component.html ) 中的代码，我使用带有延迟加载的 a 将我的 HomeComponent 加载到 PainelComponent 中，这是来自 HomeComponent 的代码：
<div class="m-grid__item m-grid__item--fluid m-wrapper">
<!-- BEGIN: Subheader -->
<div class="m-subheader ">
<div class="d-flex align-items-center">
<div class="mr-auto">
<h3 class="m-subheader__title ">Painel</h3>
</div>
<div>
<span class="m-subheader__daterange" id="m_dashboard_daterangepicker">
<span class="m-subheader__daterange-label">
<span class="m-subheader__daterange-title"></span>
<span class="m-subheader__daterange-date m--font-brand"></span>
</span>
<a href="#" class="btn btn-sm btn-brand m-btn m-btn--icon m-btn--icon-only m-btn--custom m-btn--pill">
<i class="la la-angle-down"></i>
</a>
</span>
</div>
</div>
</div>
<!-- END: Subheader -->
<div class="m-content">
<!--Begin::Section-->
<div class="row">
<div class="col-xl-12">
</div>
<div class="col-xl-12 col-lg-12">
<!--begin:: Widgets/Quick Stats-->
<div class="row m-row--full-height">
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="m-portlet m-portlet--half-height m-portlet--border-bottom-brand ">
<div class="m-portlet__body">
<div class="m-widget26">
<div class="m-widget26__number">
570
<small>All Sales</small>
</div>
<div class="m-widget26__chart" style="height:90px; width: 220px;">
<canvas id="m_chart_quick_stats_1"></canvas>
</div>
</div>
</div>
</div>
<div class="m--space-30"></div>
<div class="m-portlet m-portlet--half-height m-portlet--border-bottom-danger ">
<div class="m-portlet__body">
<div class="m-widget26">
<div class="m-widget26__number">
690
<small>All Orders</small>
</div>
<div class="m-widget26__chart" style="height:90px; width: 220px;">
<canvas id="m_chart_quick_stats_2"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="m-portlet m-portlet--half-height m-portlet--border-bottom-success ">
<div class="m-portlet__body">
<div class="m-widget26">
<div class="m-widget26__number">
230
<small>All Transactions</small>
</div>
<div class="m-widget26__chart" style="height:90px; width: 220px;">
<canvas id="m_chart_quick_stats_3"></canvas>
</div>
</div>
</div>
</div>
<div class="m--space-30"></div>
<div class="m-portlet m-portlet--half-height m-portlet--border-bottom-accent ">
<div class="m-portlet__body">
<div class="m-widget26">
<div class="m-widget26__number">
470
<small>All Comissions</small>
</div>
<div class="m-widget26__chart" style="height:90px; width: 220px;">
<canvas id="m_chart_quick_stats_4"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<!--end:: Widgets/Quick Stats-->
</div>
</div>
<!--End::Section-->
</div>
</div>
这是我不想要的方法（这是 ANGULAR 6 WITH ）：
但是当我从 HomeComponent 中选择所有代码时，从 PainelComponent 中删除这一行：
<div *ngIf="showContent" #mContentWrapper>
<router-outlet></router-outlet>
</div>
并将 HomeComponent 中的所有代码放入 100% 的全宽包装器中，它的工作原理与我预期的一样，为什么会这样？我必须使用路由器做什么，我在想 Angular 只是从一个组件中添加 HTML 文件，但我想不是这样的。
这是我将 home.component.html 放入 painel.component.html 时的代码
<!-- begin:: Page -->
<div class="m-grid m-grid--hor m-grid--root m-page">
<m-header *ngIf="showContent"></m-header>
<!-- begin::Body -->
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
<m-leftmenu></m-leftmenu>
<div class="m-grid__item m-grid__item--fluid m-wrapper">
<!-- BEGIN: Subheader -->
<div class="m-subheader ">
<div class="d-flex align-items-center">
<div class="mr-auto">
<h3 class="m-subheader__title ">Painel</h3>
</div>
<div>
<span class="m-subheader__daterange" id="m_dashboard_daterangepicker">
<span class="m-subheader__daterange-label">
<span class="m-subheader__daterange-title"></span>
<span class="m-subheader__daterange-date m--font-brand"></span>
</span>
<a href="#" class="btn btn-sm btn-brand m-btn m-btn--icon m-btn--icon-only m-btn--custom m-btn--pill">
<i class="la la-angle-down"></i>
</a>
</span>
</div>
</div>
</div>
<!-- END: Subheader -->
<div class="m-content">
<!--Begin::Section-->
<div class="row">
<div class="col-xl-12">
</div>
<div class="col-xl-12 col-lg-12">
<!--begin:: Widgets/Quick Stats-->
<div class="row m-row--full-height">
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="m-portlet m-portlet--half-height m-portlet--border-bottom-brand ">
<div class="m-portlet__body">
<div class="m-widget26">
<div class="m-widget26__number">
570
<small>All Sales</small>
</div>
<div class="m-widget26__chart" style="height:90px; width: 220px;">
<canvas id="m_chart_quick_stats_1"></canvas>
</div>
</div>
</div>
</div>
<div class="m--space-30"></div>
<div class="m-portlet m-portlet--half-height m-portlet--border-bottom-danger ">
<div class="m-portlet__body">
<div class="m-widget26">
<div class="m-widget26__number">
690
<small>All Orders</small>
</div>
<div class="m-widget26__chart" style="height:90px; width: 220px;">
<canvas id="m_chart_quick_stats_2"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="m-portlet m-portlet--half-height m-portlet--border-bottom-success ">
<div class="m-portlet__body">
<div class="m-widget26">
<div class="m-widget26__number">
230
<small>All Transactions</small>
</div>
<div class="m-widget26__chart" style="height:90px; width: 220px;">
<canvas id="m_chart_quick_stats_3"></canvas>
</div>
</div>
</div>
</div>
<div class="m--space-30"></div>
<div class="m-portlet m-portlet--half-height m-portlet--border-bottom-accent ">
<div class="m-portlet__body">
<div class="m-widget26">
<div class="m-widget26__number">
470
<small>All Comissions</small>
</div>
<div class="m-widget26__chart" style="height:90px; width: 220px;">
<canvas id="m_chart_quick_stats_4"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<!--end:: Widgets/Quick Stats-->
</div>
</div>
<!--End::Section-->
</div>
</div>
</div>
<m-footer></m-footer>
</div>
<!-- end:: Page -->
<!-- begin::Scroll Top -->
<div id="m_scroll_top" class="m-scroll-top">
<i class="la la-arrow-up"></i>
</div>
<!-- end::Scroll Top -->
这是我想要的方法：
解决方案
Angular 使用 shadow-dom 浏览器的能力来渲染你的组件（使用 ViewEncapsulation）。
如果您注意，您应该注意到 using<m-home>在您的 html 树中添加了一个节点。
一个简单的解决方案是：
- 在您的
home.component.ts中，将您的选择器更改div[m-home]为m-home - 在您
home.component.html删除第一个<div>（并确保删除最后的括号）。 - 现在，在您使用的模板中
<m-home>，将其替换为：<div m-home class="m-grid__item m-grid__item--fluid m-wrapper"> </div>
再次检查您的 html 树，您会注意到不同之处
推荐阅读
- java - 在 Java 中使用准备好的语句更改语句
- eclipse - 更新后 Eclipse 自动完成功能中断
- go - 通过向通道发送消息来退出工作人员
- fedora - (Fedora 34) 已安装 java 时出现错误“bash: java: command not found”
- ruby - 我无法正确绘制和格式化对虾文本
- python - 如何从熊猫表中自动分配变量？
- react-native - 我可以使用 reanimated 2.0 或原生驱动程序来为 react-native-raw-bottom-sheet 的高度设置动画吗？
- android - 在 livedata 中更改列表项值的正确方法
- postgresql - Postgres - 创建对 VIEW 而不是底层 TABLE 具有只读访问权限的用户
- python - 我尝试将其转换为 int 也同样的错误