动态添加样式标签到组件并重新封装样式（角度）

Question

我正在致力于 AngularJS 到 Angular 的升级，目前我们有一个混合应用程序，它与 webpack 捆绑在一起，而不仅仅是 Angular cli。这导致了我们无法正确捆绑 css 或 scss 文件并可以从 styleUrls 中的升级组件访问这些文件的问题。

所以我们一直在带有标签的模板中添加样式。需要添加的样式如下所示：（这只是部分样式的示例）

const styles = `
    tr.leader td,
    tr.leader td .personPopup {
        color: ${this.config.LeaderTextColor};
    }

    tr.leader td {
        background-color: ${this.config.LeaderBackgroundColor};
    }

    tr.current-user td,
    tr.current-user td .personPopup {
        color: ${this.config.TableRowCurrentUserTextColor};
    }
`

用户可以在前端设置颜色，并通过我们的配置加载以获得定制体验。

不幸的是，我还没有找到一种方法可以将它们包含在模板的样式标签中并访问角度变量，例如 {{config.TableRowCurrentUserTextColor}}。它无法解析为正确的值。

因此，我通过在组件中构建样式标签并将其附加到 ngOnInit 上的组件中来完成此工作。

const myWidget = document.getElementById(this.widgetId) as HTMLElement;
myWidget.appendChild(styles);

这可以工作并允许我访问我的组件配置变量，但是当通过附加这样加载样式时，它们没有被模拟视图封装正确封装，因此样式可能会泄漏并影响其他组件。

有没有办法从模板中的样式标签实际访问这些组件变量？我还没有找到有效的方法...或者有没有办法让组件重新封装自身并重新评估样式以在附加它们后封装它们？

Answer 1

要模拟封装，你需要做的就是像这样包装父类

class-wrapper-123

作为所有样式的前缀，并确保你的组件有一个div用相同的类包装内容，这将防止样式向上泄漏组件树，向下泄漏组件树。您必须使用

>

选择器来准确定位您想要影响的元素，这将确保这些样式不会影响任何子组件。工作量很大，希望您的应用程序尽快从混合型转变为普通型！

const styles = `
    .class-wrapper-123 > tr.leader > td,
    tr.leader > td > .personPopup {
        color: ${this.config.LeaderTextColor};
    }

    .class-wrapper-123 > tr.leader > td {
        background-color: ${this.config.LeaderBackgroundColor};
    }

    .class-wrapper-123 > tr.current-user > td,
    .class-wrapper-123 > tr.current-user  > td > .personPopup {
        color: ${this.config.TableRowCurrentUserTextColor};
    } `