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

Question

问题

我在我的 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

Answer 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