使用变量Angular2访问TemplateUrl

Question

I am creating a directive in VSCode Editor which loads a html page on specifying a given path:

Below is the code for same:

@Directive({
selector: 'html-outlet'
 })

export class HtmlOutlet {
@Input() html: string;

constructor(private vcRef: ViewContainerRef, private compiler: Compiler) { }

ngOnChanges() {
    const html = this.html;
    if (!html) return;

    @Component({
        selector: 'dynamic-comp',
        templateUrl: html
    })
    class DynamicHtmlComponent { };

    @NgModule({
        imports: [CommonModule],
        declarations: [DynamicHtmlComponent]
    })
    class DynamicHtmlModule { }

    this.compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule)
        .then(factory => {
            const compFactory = factory.componentFactories.find(x => x.componentType === DynamicHtmlComponent);
            const cmpRef = this.vcRef.createComponent(compFactory, 0);
        });
}}

However I keep getting below error: ERROR in ./src/client/app/shared/directives/html-outlet.directive.ts Module not found: Error: Can't resolve ' html' in 'D:\\ccw-dev\\newnewclient\\src\\client\\app\\shared\\directives'

The same code however works fine in plunker https://plnkr.co/edit/l8BwjGIMC5tUVjIeh4u4?p=preview

I am wondering what wrong i am doing. I am on angular 5.2.6 version in my VScode solution.

Answer 1

Can you try

@Component({
    selector: 'dynamic-comp',
    templateUrl: `${html}`
})
class DynamicHtmlComponent { };

It should break the regexp use by the angular template loader ( cf Angular 2 - Webpack 2 - template-loader not working with templateUrl )

Answer 2

I was able to solve my problem by not using TemplateUrl.I used a template then I used innerHtml to assign the the html.

 @Component({
    selector: 'dynamic-comp',
    template:`
    <div [innerHtml]="myTemplate">
    </div>
    `
  })
  class DynamicHtmlComponent  { 
    private myTemplate: any = "";
    constructor(private http: Http , private sanitizer: DomSanitizer ){
        this.http.get(html).subscribe((html)=>{
            this.myTemplate = sanitizer.bypassSecurityTrustHtml(html.text()) ;               
        })
    }
  };