typescript - Finns det i Angular ett sätt att injicera HTML som innehåller en komponentdirektiv i en föräldrakomponents mall?

Jag skulle vilja ha HTML i min databas som innehåller komponentdirektiv och sedan använda det som en del av en komponentmall i Angular.

Till exempel, om jag har:

<div [innerHTML]="injectMe"></div>

i App-komponentens mall och detta i koden för app-komponenten:

export class AppComponent  {
  injectMe = "<p>Paragraph</p> <app-injected></app-injected> ";
}

skapa sedan en komponent som heter injected:

mall :

<p> injected works! </p>

kod :

@Component({
  selector: 'app-injected',
  templateUrl: './injected.component.html',
  styleUrls: ['./injected.component.css']
})
export class InjectedComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Jag får en varning i konsolen att "sanering av HTML tog bort något innehåll". Följande den kedjan försökte jag lägga till ett anrop för att markera strängen som säker med: this.sanitizer.bypassSecurityTrustHtml

export class AppComponent  {
  injectHtml = "<p>Paragraph</p> <app-injected></app-injected> ";
  injectMe: any;

  constructor(private sanitizer: DomSanitizer){
    this.injectMe = this.sanitizer.bypassSecurityTrustHtml(this.injectHtml);
  }
}

Det resulterar i att direktivtaggen lämnas kvar i HTML utan någon varning i konsolen om att sanitize tagit bort något, men komponenten verkar inte behandlas av Angular. Jag såg att man kan använda komponentfabrik för att skapa komponenter dynamiskt, men jag tror inte att detta kommer att hjälpa i mitt fall om jag inte vill manuellt analysera HTML för att kontrollera komponenterna.

Svar #1

Jag tror inte att detta är möjligt.

Det finns ett intressant SO-inlägg här som handlar om när constructor kallas i Angulars livscykel.

Den intressanta delen:

Angular börjar bootstrappa applikationen ...det skapar först klasser för varje komponent. Så den anropar MyAppComponent-konstruktören.

dvs. Angular analyserar HTML i HTML för att ta reda på vilka TypeScript-komponenter det behöver instansiera. Detta betyder att du inte kan injicera HTML och förvänta dig att Angular inkluderar det i uppstartsprocessen, eftersom det redan har missat tåget.

Relaterade artiklar