将样式应用于 Angular 2 中动态创建的元素

Posted 2023-05-07

【中文标题】将样式应用于 Angular 2 中动态创建的元素

【英文标题】：Applying styles to dynamically created elements in Angular 2

【发布时间】：2018-08-07 18:16:21

【问题描述】：

我使用 Angular CLI 生成了一个新组件，它给了我一个 html 文件、CSS 文件和一个打字稿文件。在打字稿文件中，我生成了一些 HTML（两个 div）来包装一些由 JS 文件生成的推文。

ngOnInit() 
    var config = 
      "id": '605465000484982784',
      "domId": '',
      "maxTweets": 3,
      "enableLinks": true,
      "showUser": false,
      "showTime": true,
      "dateFunction": '',
      "showRetweet": false,
      "customCallback": handleTweets,
      "showInteraction": false
    ;

    function handleTweets(tweets) 
        var x = tweets.length;
        var n = 0;
        var element = document.getElementById('social');
        var html = '';
        while(n < x) 
          html += '<div class="tweet-outer"><div class="tweet-inner">' + tweets[n] + '</div></div>';
          n++;
        
        element.innerHTML = html;
    

    twitterFetcher.fetch(config);
  

但是tweet-outer 和tweet-inner css 样式没有被应用。我 99% 确定这是由于样式在 Angular 中的加载方式，但我只是不知道如何绕过它，我也很确定修复它会非常简单，但似乎就像在 Angular 中修复 CSS 问题有很多不同的方法一样，我觉得我只是迷失在不同解决方案的海洋中！

【问题讨论】：

在你的样式文件中尝试添加:host::ng-deep.avatar

.avatar 是一个类名

【参考方案1】：

对于您动态创建的类，您可以像这样设置它们的样式

:host::ng-deep .yourclassnamehere 

您可以参考这篇文章Angular 2 - innerHTML styling了解更多信息

编辑：23/05/2019

::ng-deep 伪类选择器还有两个别名：>>> 和 /deep/，这三个都将很快被删除。

https://github.com/angular/angular/issues/25160

情况仍在不断发展，但现在，如果某些用例需要，可以使用::ng-deep。

在大多数情况下，将样式添加到全局样式表可以解决此问题

【讨论】：

还有其他方法吗？因为 ::ng-deep 已被弃用