在Angular 2中为动态创建的元素应用样式

Question

我使用Angular CLI生成了一个新组件，它给了我一个HTML文件、CSS文件和一个typescript文件。在typescript文件中，我生成了一些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问题，所以我感觉自己就像迷失在不同解决方案的海洋中！

- Web Develop Wolf

---

在你的样式文件中尝试添加 :host::ng-deep.avatar { }。 - Ragavan Rajan

".avatar" 是一个类名。 - Ragavan Rajan

Answer 1

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

:host::ng-deep .yourclassnamehere {

}

您可以参考本帖Angular 2 - innerHTML styling了解更多信息

编辑：2019年5月23日

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

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

情况仍在发展中，但目前::ng-deep可用于某些用例。

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

- Smokey Dawson

---

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