nasıl yapılır Açısal 2 bu aşağı kaynar

Question

this plunker görüldüğü gibi

, Dinamik benim elemanların birine bir HTML ekliyorum dinamik olarak eklenen routerLink yönergesini, pick up:

@Component({ 
    selector: 'my-comp', 
    template: `<span [innerHTML]="link"></span>`, 
}) export class MyComponent { 
    private linkContent = '<a routerLink="/my-route">GoTo Route</a>'; 
    private link; 

    constructor(sanitizer: DomSanitizer) { 
     this.link = sanitizer.bypassSecurityTrustHtml(linkContent); 
    } 
} 

Bu <a routerLink="/my-route">GoTo Route</a> sonuçlanır olmak DOM'a eklendi, ancak Angular bu öğe üzerindeki routerLink yönergesi hakkında hiçbir şey bilmiyor ve ona "bağlanmadı". Bu yüzden, bağlantıyı tıkladığınızda, yeniden önyükleme ile yeniden yükleme işlemi sonuçlanır (bu, pusulada çalışmaz, sadece 404 verir).

Soru: DOM (veya kısmen, hatta tek eleman) geçmesi açısal anlatmak ve gerekirse bileşen başlatma nasıl gerçekleştirileceği?

Answer 1

Angular2, sanitizasyon dışında herhangi bir şekilde dinamik olarak eklenen HTML'yi işlemez.

'<a routerLink="/my-route">GoTo Route</a>''un innerHTML'a geçirilmesi, bu dizeyi DOM'a geçirmektir, ancak başka bir şey değil. Uygulanmakta veya uygulanmakta olan routerLink sayılı direktif yoktur.

o Angular2 bağlamaları, direktifler veya bileşenlerini kullanan dinamik HTML eklemek gerekirse, bir bileşenler şablonuna HTML ekleyin ve ben Angular 2 dynamic tabs with user-click chosen components