如何将 templateUrl 作为 Angular 2 中的变量传递？

Question

我已关注此链接 How to use variable to define templateUrl in Angular2，但我收到错误：

错误错误：找不到模块“。”在 webpackMissingModule (html-outlet.ts:26) [角度] 在 HtmlOutlet.ngOnChanges (html-outlet.ts:26) [角度] 在 checkAndUpdateDirectiveInline (core.es5.js:10756) [角度] 在 checkAndUpdateNodeInline (core.es5.js:12137) [角度] 在 checkAndUpdateNode (core.es5.js:12105) [角度] 在 debugCheckAndUpdateNode (core.es5.js:12734) [角度] 在 debugCheckDirectivesFn (core.es5.js:12675) [角度] 在 Object.eval [作为 updateDirectives] (StaticContentComponent.html:3) [角度] 在 Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12660) [角度] 在 checkAndUpdateView (core.es5.js:12072) [角度]
在 callViewAction (core.es5.js:12387) [角度] 在 execComponenter code hereentViewsAction (core.es5.js:12333) [角度] 在 checkAndUpdateView (core.es5.js:12078) [角度]
在 callViewAction (core.es5.js:12387) [角度]

我的页脚.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>

此代码中的

article?.html 似乎不是有效的 templateUrl。 请检查它是否应该是“article.html”。