堆栈内存溢出
  简体   繁体   English

包含组件上的奇怪行为Angular 6

[英]Strange behavior Angular 6 on include components

 原文  2018-12-04 15:12:38  6   1    javascript/ html/ css/ angular/ metronic

问题描述

I buy a theme that is working fine on an HTML + CSS simple project approach but I want to transform it into an Angular 6 project. 我购买了一个主题，该主题在HTML + CSS简单项目方法上运行良好，但我想将其转换为Angular 6项目。

I managed to put the theme to work on Angular 6 with no problem, but I get a strange CSS behaviour when in an angular 6 application look my code : 我设法使主题在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 -->

this is my code from my PainelComponent ( painel.component.html ), I use a with a lazy load to load my HomeComponent inside the PainelComponent, this is the code from HomeComponent : 这是我的PainelComponent（painel.component.html）中的代码，我使用带有延迟加载的来将我的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>

This is the approach that I DON'T WANT ( THIS IS IN ANGULAR 6 WITH ) : 这是我不想要的方法（这与ANGULAR 6有关） ：

Style that i don't want 我不想的风格

But when i pick all the code from HomeComponent, erase this line from PainelComponent : 但是，当我从HomeComponent中选择所有代码时，请从PainelComponent中删除以下行： 

<div *ngIf="showContent" #mContentWrapper>

      <router-outlet></router-outlet>

    </div>

and put all the code from HomeComponent it works as I expected with a Full-Width Wrapper 100%, Why this? 并将HomeComponent中的所有代码与我期望的100％全角包装器一起使用，为什么呢？ What I must do to work with router, I was thinking that Angular just add the HTML file from a component but I guess is not like this. 我在使用路由器时必须做的事情是，我以为Angular只是从组件中添加HTML文件，但我想不是这样的。

This is the code when i put the home.component.html inside the painel.component.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 -->

This is the approach that I WANT: 这是我想要的方法：

Style that i want 我想要的风格

1 个解决方案

解决方案1
 0  2018-12-04 16:11:03

Angular uses shadow-dom browser's capability to render your component (using ViewEncapsulation). Angular使用shadow-dom浏览器的功能来渲染您的组件（使用ViewEncapsulation）。

If you pay attention, you should notice that using <m-home> adds a node inside your html tree. 如果您注意的话，您应该注意到使用<m-home>在html树中添加了一个节点。

An easy solution is : 一个简单的解决方案是：

  • In your home.component.ts , change your selector to div[m-home] insteaad of m-home 在你home.component.ts ，改变你的选择器div[m-home]的insteaad m-home
  • In your home.component.html remove the first <div> (and ensure to delete enclosing bracket at the end). 在您的home.component.html删除第一个<div> （并确保删除末尾的括号）。
  • Now, in the template where you use <m-home> , replace it by : <div m-home class="m-grid__item m-grid__item--fluid m-wrapper"> </div> 现在，在使用<m-home>的模板中，将其替换为： <div m-home class="m-grid__item m-grid__item--fluid m-wrapper"> </div>

Check your html tree again, you will notice the difference 再次检查您的html树，您会注意到其中的区别

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Angular：ngCookies的奇怪行为 - Angular: strange behavior with ngCookies Angular上Bootstrap模态的奇怪行为 - Strange Behavior on Bootstrap Modal on Angular Angular 表单验证中的奇怪行为 - Strange behavior in Angular form validation 嵌套Angular指令的奇怪行为 - Strange behavior of nested Angular directives http响应中的角度异常行为 - Angular strange behavior in http response Angular 路由混乱/奇怪的行为 - Angular routing confusion/strange behavior 材质UI表组件分解异常行为 - Material UI table components decomposition strange behavior Faye奇怪的Angular.js行为 - Strange Angular.js behavior with Faye 在Angular 2中提交帖子请求时的奇怪行为 - Strange behavior when submitting post request in Angular 2 组件间等待数据服务 Angular，行为主体 - await dataService between components Angular, Behavior Subject
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM