Странное поведение Angular 6 на включаемых компонентах - PullRequest
Новая
       24

Странное поведение Angular 6 на включаемых компонентах

0 голосов
/ 04 декабря 2018

Я покупаю тему, которая отлично работает на простом проектном подходе HTML + CSS, но я хочу превратить ее в проект Angular 6.

Мне удалось заставить эту тему работать на Angular 6 безпроблема, но я получаю странное поведение CSS, когда в угловом приложении 6 смотрю мой код: 

<!-- 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), я использую с ленивой загрузкойчтобы загрузить мой 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>

Это подход, который Я НЕ ХОЧУ (ЭТО В АНГУЛЯРНОМ 6 С) * :

Стиль, который мне не нужен

Но когда я выбираю весь код из HomeComponent, удалите эту строку из PainelComponent: 

<div *ngIf="showContent" #mContentWrapper>

      <router-outlet></router-outlet>

    </div>

иположить весь код из HomeComponent, он работает, как я ожидал, с Wrapper Full-Width 100%, почему это?Что я должен сделать, чтобы работать с маршрутизатором, я думал, что Angular просто добавляет файл HTML из компонента, но я думаю, это не так.

Это код, когда я помещаю home.component.html внутриthe 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 -->

Это подход, который ХОЧУ:

Стиль, который я хочу

1 Ответ

0 голосов
/ 04 декабря 2018

Angular использует возможности браузера shadow-dom для рендеринга вашего компонента (используя ViewEncapsulation).

Если вы обратите внимание, вы должны заметить, что использование <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дерево снова, вы заметите разницу

...