具有多个入口点延迟加载的 Angular 库

Question

我有一个自定义库，其中包含一些自定义元素，例如：custom-a、custom-b 和 custom-c。 结构如下：

• 项目/自定义库

  • 源/库

    • 定制-a

      • custom-a.component.ts

      • custom-a.component.scss.ts

      • custom-a.module.ts

    • 定制-b

      • custom-b.component.ts

      • 自定义-b.component.scss.ts

      • custom-b.module.ts

    • 定制-c

      • custom-c.component.ts

      • 自定义-c.component.scss.ts

      • custom-c.module.ts

• public-api.ts（包括那些行：

  export * from './lib/custom-a'
  export * from './lib/custom-b'
  export * from './lib/custom-c'
  

)

我在另一个应用程序中使用 custom-b 组件，方法是将其导入其 app.module.ts。 我注意到，除非在应用程序模板中添加 custom-b（添加），否则不会在浏览器上使用/查看 custom-b.component.scss 内容。这是为什么？默认情况下是否有模块延迟加载？ （没有使用路由）

谢谢！

Answer 1

好吧，所以我认为你确实没有理解 css 在角度中的工作方式。并以不当的方式应用 css。

通过告诉

ViewEncapsulation.None

您正在删除阴影 DOM angular 正在生成。其中，当组件被渲染时，会将他的 css 应用于所有其他元素。

@Component({
  selector: 'app-custom-b',
  templateUrl: './custom-b.component.html',
  styleUrls: ['./custom-b.component.css'],
  encapsulation: ViewEncapsulation.None, // <-- here
})

但这只会在使用时应用。

Angular 中的一个组件应该能够自行离开并且不应该影响其他组件（至少不是那样）。

但是如果您希望共享一个 css 文件，您可以执行以下操作之一

1：共享 CSS

1. 创建一个新的

   shared.component.css

   文件
2. 在那里添加你的CSS

:host {
  .test-b {
    background-color: pink;
  }
}

3. 在你想要的组件中使用它。

2 : 全局 CSS

1. 在

   global_styles.css

   文件中添加全局css。这将改变整个项目中的

   teat-b

3 : 在

angular.json

文件中导入导出的css

1. 打开

   angular.json

   文件
2. 为

   styles

   数组添加新样式

"styles": [
"src/global_styles.css",
"new/path/to/my/project"
],

_这里 如果你不知道如何导出 CSS _

解释：ViewEncapsulation

无

CSS 将在呈现时应用于整个项目。更喜欢添加组件选择器以避免它对您的项目产生影响

app-custom-b {
  // your css
}

Pro：让你改变一些你可以改变的子元素的CSS。

缺点：不利于优化。

封装

将在一种 Shadow DOM 中创建。

专业版：优化

缺点：您不能在自己的影子 DOM 中的某些子元素中更改 css。