javascript - 如何解决 Angular 8 中的 View 封装问题？

Question

我有父组件和子组件。作为模态组件创建的子组件。所以我在父组件中包含了子组件选择器，并且我设置了 View 封装为无，因此它将采用父组件 css 和所有它也可以工作，但父组件有#paper id 应用了一些第三方(rappidjs)库 css(对于SVG 图表)。像子组件一样具有#dataMapper id。但这里第三方 css 没有采用，因为子组件设置为 'encapsulation: ViewEncapsulation.None' .如果我将删除 encapsulation: ViewEncapsulation.None它正在工作，但模式不起作用。所有模态加载而不是onclick。如何解决这个问题，请给我建议。

编码:

父组件 TS

@Component({
  selector: 'app-data-model',
  templateUrl: './data-model.component.html',
  styleUrls: ['./data-model.component.css']
})

export class DataModelComponent implements OnInit{

// Modal

openModal(id: string) {
  this.modalApp = true;
  this.modalService.open(id);
}

closeModal(id: string) {
  this.modalService.close(id);
}

父组件 HTML

<div id="toolbar">
    <div class="tool-bar-section">
    <button class="btn" (click)="openModal('custom-modal-1');"><i class="fa fa-file-excel-o" style="font-size: 24px"></i></button>     
    </div>   
</div>
<div id="paper"> </div> ( this dom taking thirdparty css)

<app-modal id="custom-modal-1">           
    <h1 class="head-bar">Data Model - Import Excel  <a href="#" class="close-icon" (click)="closeModal('custom-modal-1');"><i class="fa fa-times-circle-o" aria-hidden="true"></i></a></h1>
    <div class="modal-content-section">
     <ul>
         <li><a href="#" (click)="closeModal('custom-modal-1');openModal('custom-modal-2');">Create New Schema</a></li>
         <li><a href="#" (click)="closeModal('custom-modal-1');openModal('custom-modal-3');">Import Data to existing schema</a></li>
     </ul>       
    </div>        
</app-modal>
<app-modal id="custom-modal-2">       
    <h1 class="head-bar">Data Model - Import Excel  <a href="#" class="close-icon" (click)="closeModal('custom-modal-2');"><i class="fa fa-times-circle-o" aria-hidden="true"></i></a></h1>
    <div class="modal-content-section">
        <div id="dataMapper"></div>       ( this dom is not taking thirdparty css)
        <p><a href="#" (click)="closeModal('custom-modal-2');openModal('custom-modal-4');">Data Mapping</a></p>
    </div>
</app-modal>

子组件 HTML

<div class="app-modal">
    <div class="app-modal-body">
        <ng-content></ng-content>
    </div>
</div>
<div class="app-modal-background"></div>

子组件 Ts

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class ModalComponent implements OnInit, OnDestroy {

  @Input() id: string;
  private element: any;

  constructor(private modalService: ModalService, private el: ElementRef) {
      this.element = el.nativeElement;
  }

  ngOnInit(): void {
      // ensure id attribute exists
      if (!this.id) {
          console.error('modal must have an id');
          return;
      }

      // move element to bottom of page (just before </body>) so it can be displayed above everything else
      document.body.appendChild(this.element);

      // close modal on background click
      this.element.addEventListener('click', el => {
          if (el.target.className === 'app-modal') {
              this.close();
          }
      });

      // add self (this modal instance) to the modal service so it's accessible from controllers
      this.modalService.add(this);
  }

  // remove self from modal service when component is destroyed
  ngOnDestroy(): void {
      this.modalService.remove(this.id);
      this.element.remove();
  }

  // open modal
  open(): void {
      this.element.style.display = 'block';
      document.body.classList.add('app-modal-open');
  }

  // close modal
  close(): void {
      this.element.style.display = 'none';
      document.body.classList.remove('app-modal-open');
  }

}

服务代码

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ModalService {

  private modals: any[] = [];

  add(modal: any) {
      // add modal to array of active modals
      this.modals.push(modal);
  }

  remove(id: string) {
      // remove modal from array of active modals
      this.modals = this.modals.filter(x => x.id !== id);
  }

  open(id: string) {
      // open modal specified by id
      const modal = this.modals.find(x => x.id === id);
      modal.open();
  }

  close(id: string) {
      // close modal specified by id
      const modal = this.modals.find(x => x.id === id);
      modal.close();
  }
}

如果需要更多详细信息，请告诉我。

Answer 1

因为你的模态。
模态创建于 顶部 您的应用程序，(如果您通过检查查找 模态包装器 ，则超出正文标记。)

是 Modal 导致 dom 结构与 ng 组件结构不同步

那么为什么模态与 ng Encapsulation 一起使用?因为您的模态服务可以处理它。

但是第 3 方 CSS 文件不是您的 Angular 编译配置的一部分(即只有 sass、scss 有效)。所以它确实忽略了任何 .css即使您正确导入它。

要解决它，您可以全局应用 .css。或者，如果您对此感到害怕 覆盖 其他全局样式，您可以将 css 文件重命名为 '_somefile.scss'(注意破折号 '_'，这很重要。)

然后在您的项目全局 style.scss 文件下>创建一个与您的模态包装器匹配的选择器>在选择器下:添加一行 @import somefile (不要添加扩展名)

样式.scss

.modal-wrapper {
    @import somepath/somefile
}