Angular: Bir Bileşenin HTML'ini Dinamik Olarak Render Etme ve Alma

Bir bileşenin HTML'ini, uygulamanın kendisiyle hiçbir ilgisi olmayan boş yeni bir HTML sayfası olan about:blank türünde yeni bir sekme açmak için kullanılabilecek şekilde render edin.

Neden? Örneğin, bir string değişken kullanarak HTML oluşturmayı önlemek için:

var html = '<div>
              <h3>My Template</h3>
              ' + myProperty + ' 
            </div>';

Bir bileşeni dinamik olarak ViewContainerRef.createComponent ve ComponentFactoryResolver kullanarak render edebileceğinizi gördüm. Bununla ilgili sorun, bileşenin uygulamadaki view container içinde render edilmesi. Yapmak istediğim şey ise, o bileşenin HTML'ini oluşturmak, böylece o HTML'i istediğim yere koyabilmek. (bu durumda, window.open() yöntemi tarafından verilen nesnenin document özelliğinde)

Örnek:

@Component({
  selector: 'app-component',
  template: `
            <div>
              <h3>My Template</h3>
              {{ myProperty }}
            </div>
          `,
  styleUrls: ['./my.component.less']
})
export class MyComponent{
  myProperty: string;
}

Bunu şu şekilde kullanmayı bekliyorum:

//get new window tab
var newTab = window.open('about:blank', '_blank');

//get the HTML of the component

//use it to open the new tab
newTab.document.write(html);

Cevap #1

Diğer insanlara yardımcı olabilir, bu yüzden burada ne yaptığımı ve hangi sorunlarla karşılaştığımı paylaşıyorum. Bazı çözümlere baktıktan sonra, bu benim için işe yaradı. Sorunun, Angular'ın HTML'inizi tüm olası <script> etiketlerini kaldırarak temizlediğini fark ettiğimde olduğunu anladım. Ne yazık ki, benim üç tane vardı. Ayrıca, bunların temizlenmesini istemiyorsanız, DomSanitizer adında bir servis kullanmanız ve bypassSecurityTrustScript (doküman) yöntemini, script'i parametre olarak geçirerek kullanmanız gerekir. Yani, kodu 'stringify' etmeme fikri ortadan kalktı. Bunu söyledikten sonra, HTML'in bir değişkende saklandığı ve sonra window.open'a parametre olarak geçirildiği orijinal yaklaşımı kullandım.