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

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

我通过查询“style”标记并复制innerHTML来实现这一点。 每个组件样式表似乎都有自己的“样式”标签。 在进一步开发应用程序的过程中，查询数组中的位置可能会发生变化，因此我非常希望从component.css向样式标记添加一个id。可能吗

---

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

假设您有可用的jQuery，并且您正在运行时读取样式（Angular应用程序已渲染）

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

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

此类将帮助我们查询所需组件的样式标记<上面的code>55是一个示例数字id。此数字id将帮助我们对捕获的样式进行排序（如果您想要与按时间顺序排列的DOM顺序不同的顺序）

在应用程序内部，捕获标记的样式标记（并可选地对其排序）：

//查询包含文本的所有样式标记“.组件样式id-”
//如果找到，检索数字“组件样式id”，并将其设置为属性，即组件样式id=
jQuery（'style:contains（“.component-style-id-”））。每个（函数（索引，元素）{
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）；
}
});
//现在，按指定的属性优雅地查询所需的样式标记，并按升序排序
var sortedComponentStyleElements$=jQuery（'style[component style id]'）。排序（函数（element1，element2）{
return+jQuery（element1.attr（'component-style-id'）-+jQuery（element2.attr（'component-style-id'）；
});
//从样式标记检索样式内容
sortedComponentStyleElements$。每个（函数（索引，元素）{
//console.log（element.innerHTML）；//以样式ID的数字顺序打印组件的样式内容
//如果您使用的是viewEnclaration=viewEnclaration.Emulated，则可能需要删除角度封装标记
console.log（element.innerHTML.replace（/\[\u ngcontent-（[a-zA-Z0-9]+）\]/g，”）；
});

您是否尝试过

：主机上下文

？你能详细说明一下吗？我不确定如何使用该选择器获取所需的样式信息。您必须从dom读取样式吗？你在使用jQuery吗？我没有使用jQuery，也不打算使用它。如果有另一种方法可以将样式复制到新页面（angular应用程序不包括这些页面），我就不必从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, ""));
});