Question

我正在使用Angular CLI 1.3.0创建一个项目。有一次，我需要从某个component.css文件中获取样式，以将它们放入一个新的浏览器选项卡中，其中显示非角度页面。

我设法通过查询'style'标签并复制innerHTML来做到这一点。每个组件样式表似乎都有自己的“样式”标签。在进一步开发应用程序时，查询数组中的位置可能会发生变化，所以我真的想从component.css中为style标记添加一个id。这可能吗？

PS：我知道我可以复制样式标签中的所有内容，如果没有其他方法可以获得正确的样式，我会这样做。

Answer 1

假设您有jQuery avaiable并且您正在运行时读取样式（Angular应用程序已呈现）。

在要捕获样式的每个 .component.css 中，插入类：

.component-style-id-55 {
  margin: 0; // Important,  must have a single style rule so that this class gets through
}

此类将帮助我们查询所需组件的样式标记。上面的55是数字ID 的示例。这个数字id 将帮助我们对捕获的样式进行排序（如果你想要按时间顺序的DOM顺序排序）。

在应用程序内部，捕获标记的样式标记（并可选择对它们进行排序）：

// Query all style tags which contain text ".component-style-id-"
// If found, retrieve numeric "component-style-id" and set it as attribute i.e. component-style-id=<assigned numeric id>
jQuery('style:contains(".component-style-id-")').each(function (index, element) {
    var componentStyleIdMatcher = element.innerHTML && element.innerHTML.match(/\.component-style-id-([0-9]+)/),
        componentId = componentStyleIdMatcher && +componentStyleIdMatcher[1];

    if (componentId) {
        jQuery(element).attr('component-style-id', componentId);
    }
});

// Now, elegantly query required style tags by assigned attribute and sort them ascending
var sortedComponentStyleElements$ = jQuery('style[component-style-id]').sort(function (element1, element2) {
    return +jQuery(element1).attr('component-style-id') - +jQuery(element2).attr('component-style-id');
});

// Retrieve style content from style tags
sortedComponentStyleElements$.each(function(index, element) {
    //console.log(element.innerHTML); // Prints style content of components in their numeric order of style ids

    // You might to remove angular encapsulation tags if you are using ViewEncapsulation = ViewEncapsulation.Emulated
    console.log(element.innerHTML.replace(/\[_ngcontent-([a-zA-Z0-9]+)\]/g, ""));
});

Angular CLI如何将id添加到样式标记

1 个答案: