javascript - Angular 2'de dinamik olarak oluşturulan öğelere stil uygulama

Yeni bir bileşen oluşturmak için Angular CLI kullandım, bu bana bir HTML dosyası, bir CSS dosyası ve bir TypeScript dosyası verdi. TypeScript dosyasında, bir JS dosyası tarafından oluşturulan bazı tweetleri sarmalamak için bazı HTML (iki div) üretiyorum.

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);
  }

Ama tweet-outer ve tweet-inner CSS stilleri uygulanmıyor. Bunun Angular'da stillerin yüklenme şekli nedeniyle olduğundan %99 eminim, ama bunu nasıl aşacağımı bilmiyorum. Ayrıca bunun çözülmesi için gerçekten çok basit bir şey olacağına da oldukça eminim, ama Angular'da CSS sorunlarını çözmenin o kadar çok farklı yolu var ki, kendimi çeşitli çözümler denizinde kaybolmuş gibi hissediyorum!

Cevap #1

Dinamik olarak oluşturduğunuz sınıfları bu şekilde stilize edebilirsiniz

:host::ng-deep .yourclassnamehere {

}

Daha fazla bilgi için bu gönderiye Angular 2 - innerHTML stil verme başvuru yapabilirsiniz

GÜNCELLEME: 23/05/2019

::ng-deep pseudo-class seçicisinin ayrıca birkaç takma adı vardır: >>> ve /deep/, ve bunların üçü de yakında kaldırılacak.

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

Durum hâlâ gelişmekte, ancak şu anda, belirli kullanım durumları için gerekirse ::ng-deep kullanılabilir.

Çoğu durumda, stillerinizi küresel stil sayfanıza eklemek bu sorunu çözecektir

İlgili makaleler