如何在Angular中更改第三方組件的封裝？

Question

我正在使用帶有本機封裝的AngularElements，因此可以在bs3項目中使用bs4組件。 例：

@Component({
  selector: 'app-my-button',
  templateUrl: './my-button.component.html',
  encapsulation: ViewEncapsulation.Native,
  styles: ['@import "~bootstrap/scss/bootstrap.scss";']
})
export class MyButtonComponent {}

問題是如何更改第三方組件的封裝，以便全局css不會影響它？ 給定NgbModalWindow組件。 如何將其封裝更改為ViewEncapsulation.Native並應用特定樣式？

這是相關問題

Answer 1

如果在其encapsulation設置為本機的組件內使用第三方組件，則全局樣式將不適用於該第三方組件。 例如，如果您在自己的組件中使用第三方組件ngb-modal-window ，請說app-my-own-component其封裝設置為native，全局樣式將不適用於ngb-modal-window因為它將在陰影內root（父app-my-own-component ）。

@Component({
  selector: 'app-my-own-component',
  template: '<ngb-modal-window></ngb-modal-window>',
  encapsulation: ViewEncapsulation.Native,
  styles: ['@import "~bootstrap/scss/bootstrap.scss";']
})

但是，在這種情況下，在app-my-own-component添加樣式將應用於ngb-modal-window 。

您可以做的另一件事是在全局級別將encapsulation設置為ViewEnacpsulation.Native ，以便您應用程序中的所有組件都具有Native封裝。 您可以在main.ts文件中引導app模塊時執行此操作：

將此： platformBrowserDynamic().bootstrapModule(AppModule)更改為：

platformBrowserDynamic().bootstrapModule(AppModule, [
  {
      defaultEncapsulation: ViewEncapsulation.Native
  }
])

您必須在main.ts中導入ViewEncapsulation ，無論文件名是什么，您都可以在模塊的引導位置。