Question

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

错误错误：找不到模块“。”在webpackMissingModule   （html-outlet.ts：26）HtmlOutlet.ngOnChanges的[angular]   （html-outlet.ts：26）checkAndUpdateDirectiveInline中的[angular]   （core.es5.js：10756）checkAndUpdateNodeInline上的[angular]   （core.es5.js：12137）checkAndUpdateNode的[angular]   （core.es5.js：12105）debugCheckAndUpdateNode上的[angular]   （core.es5.js：12734）debugCheckDirectivesFn的[angular]   （core.es5.js：12675）[object]在Object.eval [作为updateDirectives]   （StaticContentComponent.html：3）[angular] at   Object.debugUpdateDirectives [as updateDirectives]（core.es5.js：12660）   checkAndUpdateView的[angular]（core.es5.js：12072）[有角度]
  在callViewAction（core.es5.js：12387）[angular] at   execCompon enter code here entViewsAction（core.es5.js：12333）   checkAndUpdateView的[angular]（core.es5.js：12078）[有角度]
  在callViewAction（core.es5.js：12387）[有角度]

我的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”。

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

1 个答案: