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

【问题标题】：Applying styles to dynamically created elements in Angular 2将样式应用于 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 是一个类名

标签： javascript css angular typescript

【解决方案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 已被弃用