javascript - 在 Angular 2 中對動態創建的元素應用樣式

我已經使用 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 樣式沒有被應用。我幾乎可以肯定這是由於樣式在 Angular 中的加載方式造成的，但我就是不知道該怎麼解決。我也相當確定解決方法應該很簡單，但看起來在 Angular 中修復 CSS 問題的方法太多了，我覺得自己像是在各種解決方案的海洋中迷失了！

答案＃1

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

:host::ng-deep .yourclassnamehere {

}

您可以參考這篇文章 Angular 2 - innerHTML styling 以獲取更多資訊

編輯：2019/05/23

::ng-deep 偽類選擇器也有幾個別名：>>> 和 /deep/，這三個都將很快被移除。

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

情況仍在發展中，但目前，如果需要用於某些使用情境，仍然可以使用 ::ng-deep。

在大多數情況下，將您的樣式添加到全局樣式表中可以解決此問題