將樣式應用於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-inner css樣式沒有被應用。 我99％肯定這是由於Angular中的樣式如何加載，但我只是不知道如何繞過它，我也很確定這將是一個非常簡單的修復它，但它似乎就像有很多不同的方法來解決Angular中的CSS問題，我覺得我只是迷失在不同解決方案的海洋中！

Answer 1

對於動態創建的類，您可以像這樣設置樣式

:host::ng-deep .yourclassnamehere {

}

你可以參考這篇文章Angular 2 - innerHTML樣式以獲取更多信息

編輯：23/05/2019

::ng-deep偽類選擇器也有幾個別名： >>>和/deep/ ，很快就會刪除所有這三個別名。

情況仍在不斷發展，但是現在，如果某些用例需要，可以使用::ng-deep 。

通過將這些類添加到全局樣式表中也可以解決此問題。