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

Question

我已经使用Angular CLI生成了一个新组件,它给了我一个HTML文件,CSS文件和一个打字稿文件.在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-innercss样式.我99%肯定这是由于Angular中的样式如何加载,但我只是不知道如何绕过它,我也很确定这将是一个非常简单的修复它,但它似乎就像有很多不同的方法来解决Angular中的CSS问题,我觉得我只是迷失在不同解决方案的海洋中!

Answer 1

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

:host::ng-deep .yourclassnamehere {

}

你可以参考这篇文章Angular 2 - innerHTML样式以获取更多信息