Làm thế nào để giải quyết vấn đề Xem Đóng gói trong Angular8?

Tôi có thành phần cha mẹ và thành phần con. Thành phần con được tạo như một thành phần phương thức. Vì vậy, tôi đã bao gồm bộ chọn thành phần con bên trong thành phần cha mẹ và tôi đã đặt đóng gói khung nhìn là không có để nó sẽ lấy css thành phần cha mẹ và tất cả và nó cũng hoạt động nhưng thành phần cha mẹ có #sheet id áp dụng một số css libary của bên thứ ba (rappidjs) Sơ đồ SVG). Tương tự như thành phần con có id #dataMapper. nhưng ở đây css của bên thứ ba không lấy vì thành phần con được đặt thành 'encapsulation: ViewEncapsulation.None'. Nếu tôi sẽ loại bỏ encapsulation: ViewEncapsulation.Nonenó hoạt động nhưng phương thức không hoạt động. tất cả các phương thức tải thay vì onclick. Làm thế nào để giải quyết vấn đề này xin vui lòng tư vấn cho tôi một người.

Mã hóa:

Thành phần phụ huynh 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);
}

Thành phần cha mẹ 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>

Thành phần con HTML

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

Thành phần trẻ em 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');
  }

}

Mã dịch vụ

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();
  }
}

Xin vui lòng cho tôi biết nếu cần thêm chi tiết.

Vì phương thức của bạn. Phương thức được tạo trên đầu ứng dụng của bạn, (ngoài thẻ cơ thể nếu bạn tìm trình bao bọc phương thức bằng cách kiểm tra nó.)

Đây là Modal khiến cấu trúc dom không đồng bộ với cấu trúc thành phần ng

Vậy tại sao phương thức làm việc với ng Encapsulation? Bởi vì dịch vụ phương thức của bạn có thể xử lý nó.

Nhưng tệp CSS của bên thứ 3 không phải là một phần của cấu hình biên dịch góc của bạn (tức là chỉ sass, scss hoạt động). Vì vậy, nó bỏ qua bất kỳ .cssngay cả khi bạn nhập nó đúng cách.

Để giải quyết nó, bạn có thể áp dụng .css trên toàn cầu. Hoặc nếu bạn sợ điều đó có thể ghi đè lên các kiểu toàn cầu khác, bạn có thể đổi tên tệp css thành '_somefile.scss' (chú ý đến dấu gạch ngang '_', điều đó rất quan trọng.)

Sau đó, trong tệp style.scss toàn cầu của dự án> tạo bộ chọn khớp với trình bao bọc phương thức của bạn> bên dưới bộ chọn: thêm một dòng mà @import somefile (không thêm tiện ích mở rộng)

style.scss

.modal-wrapper {
    @import somepath/somefile
}

Theo mô tả của bạn trong vấn đề mà bạn muốn kế thừa css của phần tử cha mẹ bên trong thành phần con. Vì vậy, tôi giả sử rằng bạn đang có các thành phần HTML giống nhau trong các thành phần cha mẹ và con cái và bạn không muốn sao chép css của mình.

Vì chúng tôi không thể sao chép vấn đề của bạn và bạn chưa tạo bất kỳ trường hợp stackblitz nào. Tôi sẽ đề nghị một sự thay thế tốt hơn sẽ làm việc. Vui lòng tìm nó bên dưới:

Chúng tôi có thể chỉ định nhiều URL CSS bên trong thuộc styleUrlstính của @Componentđối tượng siêu dữ liệu trang trí. Vì vậy, tôi cũng đề nghị bạn chuyển Url tệp kiểu cha mẹ.

Tôi đã tạo một stackblitz cơ bản cho thấy nơi tôi đang truy cập CSS của thành phần cha mẹ: https://stackblitz.com/edit/angular-jhewzy

Tệp css thành phần cha mẹ (app.component.css) - Tôi đang chỉ định màu nền của pthẻ bên trong cha mẹ nên có màu vàng. Tôi muốn kế thừa điều này trong thành phần con.

p {
  background-color: yellow;
}

Dưới đây là CSS thành phần con (hello.component.css)

p {
  font-style: italic;
}

Khi bạn muốn sử dụng thành phần cha mẹ bên trong thành phần con, chỉ cần sử dụng đường dẫn URL kiểu trong thuộc tính styleUrls

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<p>I am child</p>`,
  styleUrls: [`./hello.component.css`, './app.component.css'],
})


export class HelloComponent  {
  @Input() name: string;
}

Tôi hy vọng nó sẽ giúp bạn.