Question

我有一个组件dashboard，并且在该组件中，我生成了另一个打算在其他组件中使用的组件menu-bar（仅具有该侧边菜单的html）。如果我这样调用菜单栏：

<app-menu-bar> </ app-menu-bar>

引导程序不会为调用的该组件加载，但对于页面的其余部分，它将正常加载。但是，如果我从menu-bar组件获取html并将其放在dashboard html中，则它可以正常工作。我该怎么办？我需要做一些不同的事情才能将引导程序加载到子组件中？

注意：我将引导程序（bootstrap CSS）加载到angular.json内，并且对于其他组件正常工作

Answer 1

这是由于Angular组件的默认样式封装所致。

您可以打开dashboard.component.ts或仪表板ts文件

添加ViewEncapsulation.None或ViewEncapsulation.ShadowDom取决于您的用法。您可以参考this

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
...
@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
  encapsulation: ViewEncapsulation.None
})
...

如何在angular的子组件中加载引导程序？

1 个答案: