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-inner css样式。我99％肯定这是由于Angular中的样式如何加载，但我只是不知道如何绕过它，我也很确定这将是一个非常简单的修复它，但它似乎就像在Angular中解决CSS问题有很多不同的方法，我觉得我只是迷失在不同解决方案的海洋中！

Answer 1

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

:host::ng-deep .yourclassnamehere {

}

您可以参考此帖子Angular 2 - innerHTML styling以获取更多信息

编辑：23/05/2019

::ng-deep伪类选择器还有一些别名：>>>和/deep/，很快就会删除这三个别名。

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

也可以通过将这些类添加到全局样式表来解决此问题。

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

1 个答案: