どのようにangle2の変数としてtemplateUrlを渡すのですか？

Question

私は、このリンクに How to use variable to define templateUrl in Angular2を踏襲しているが、私はエラーを取得しています：

ERROR Error: Cannot find module "." at webpackMissingModule (html-outlet.ts:26) [angular] at HtmlOutlet.ngOnChanges (html-outlet.ts:26) [angular] at checkAndUpdateDirectiveInline (core.es5.js:10756) [angular] at checkAndUpdateNodeInline (core.es5.js:12137) [angular] at checkAndUpdateNode (core.es5.js:12105) [angular] at debugCheckAndUpdateNode (core.es5.js:12734) [angular] at debugCheckDirectivesFn (core.es5.js:12675) [angular] at Object.eval [as updateDirectives] (StaticContentComponent.html:3) [angular] at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12660) [angular] at checkAndUpdateView (core.es5.js:12072) [angular]
at callViewAction (core.es5.js:12387) [angular] at execCompon enter code here entViewsAction (core.es5.js:12333) [angular] at checkAndUpdateView (core.es5.js:12078) [angular]
at callViewAction (core.es5.js:12387) [angular]

マイfooter.html：

<div><a [routerLink]="['/aboutus']"> About</a> </div> 

routing.ts 

import { ModuleWithProviders } from '@angular/core';`enter code here` 
import { Routes, RouterModule } from '@angular/router'; 
import { StaticContentComponent } from '../common/footer/staticcontent.component'; 

const routes: Routes = [ 
    { path: 'aboutus', component: StaticContentComponent } 
    ]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(routes); 



staticcontent.component.ts 

import { Component } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 

import { ArticleService } from './article.service'; 
import { HtmlOutlet } from './html-outlet' 
class Article { 
    title: string; 
    html: string; 
} 

@Component({ 
    //selector: 'static_content', 
    template: ` 
    <div> 
     <html-outlet [html]="article?.html"></html-outlet> 
    </div> 
    ` 
}) 
export class StaticContentComponent{ 
    article: Article; 
    constructor(private articleService: ArticleService) { 
    alert(); 
    this.articleService.getArticle().subscribe(data => { 
     alert('get'); 
     this.article = data; 
     alert(data.html) 
     console.log(data); 
    }) 
    } 

    ngOnInit(): void { 

    } 

} 


html-outlet.ts 

import { 
    Component, 
    Directive, 
    NgModule, 
    Input, 
    ViewContainerRef, 
    Compiler 
} from '@angular/core'; 

import { CommonModule } from '@angular/common'; 

@Directive({ 
    selector: 'html-outlet' 
}) 
export class HtmlOutlet { 
    @Input() html: string; 

    constructor(private vcRef: ViewContainerRef, private compiler: Compiler) {alert('htl'+this.html);} 

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

Please help me... 

Answer 1

staticcontent.component.ts

<html-outlet [html]="article?.html"></html-outlet> 

記事を？。このコードのhtmlは有効なtemplateUrlのようではありません。 「article.html」にする必要があるかどうかを確認してください。