Angular2 通知组件关于在 Angular 之外创建的 DOM 元素

Posted 2023-02-22

【中文标题】Angular2 通知组件关于在 Angular 之外创建的 DOM 元素

【英文标题】：Angular2 notify Component about DOM elements created outside angular

【发布时间】：2016-12-22 15:46:33

【问题描述】：

问题

我在 Angular2 项目中使用 Swiper 轮播。使用 Webpack 构建它。 众所周知，Angular2 会为组件中的所有元素附加一些随机属性，例如 _ngcontent-pmm-6。

Swiper 为分页创建动态元素（点、项目符号，随心所欲地称呼它们）。据我了解，这发生在 Angular 之外。所以这个元素没有那些时髦的属性，Angular 不知道它们。

现在的问题：当 Angular 处理组件的 css 时（通过 styleUrls 添加），它会将此属性添加到 css 选择器

.swiper-pagination-bullet ...

成为

.swiper-pagination-bullet[_ngcontent-pmm-6] ...

但是分页是在 Angular 之外渲染的，新元素没有这个属性，所以样式不起作用。

问题

如何通知 Angular2 关于在 Angular 之外创建的元素？

参考

https://angular.io/docs/ts/latest/guide/component-styles.html#!#inspect-generated-css

【参考方案1】：

我找到了解决样式问题的解决方法。但这并不能回答我的问题。如果有人知道，将非常优雅地听到！

import  Component, ViewEncapsulation  from '@angular/core';

@Component(
    selector: 'cmp',
    template: `<div class="cmp">Component</div>`,
    styles: ['.cmp  border: green 2px solid; '],
    encapsulation: ViewEncapsulation.None // Use to disable CSS Encapsulation for this component
)

export class Component 
    constructor()  

在这里找到答案： https://coryrylan.com/blog/css-encapsulation-with-angular-2-components

【讨论】：

您也可以将 CSS 直接添加到您的 index.html。 Angular 不会重写这个 CSS，因此它不会局限于匹配 _ngcontent-... 类。

@GünterZöchbauer，我也试过这个，但我认为有一个更温和的问题解决方法。要知道，从 app 开始一直分离 CSS 并不是一个好主意。这就是 Component 的想法 - 将与其相关的所有代码放在一起。

当然，如果您一直采用 Angular2 方式，这可以正常工作。 Angular2 的方式是只修改模型并让 Angular 相应地更新 DOM。直接更新 DOM 不适合，因此您需要“hacks”。