Question

我创建了以下组件：

APP-插件 - 恢复
应用程序的小部件-我道学习者
应用程序的小部件，我的课程，老师
应用程序的小部件-我的日历
应用程序的小部件的虚拟类

我希望将它们加载到我的组件my-dashboard中，这要归功于一个字符串数组

的sanitize-html.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml} from '@angular/platform-browser';

@Pipe({
    name: 'sanitizeHtml'
})

export class SanitizeHtmlPipe implements PipeTransform {

    constructor(private _sanitizer: DomSanitizer) {}

    transform(value: any, args?: any): SafeHtml {
        return this._sanitizer.bypassSecurityTrustHtml(value);
    }
}

dashboard.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';

@Component({
  selector: 'calli-common-dashboard-page',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
  providers: []
})
export class DashboardComponent implements OnInit, AfterViewInit {

    public widgets: Array<string>;

    constructor() {}

    ngAfterViewInit() {
        this.widgets = [
            { tag: 'app-widget-resume', position: 1},
            { tag: 'app-widget-my-courses-learner', position: 2},
            { tag: 'app-widget-my-courses-teacher', position: 3},
            { tag: 'app-widget-my-calendar', position: 4},
            { tag: 'app-widget-virtual-classes', position: 5},
        ].map(o => `<` + o.tag + `></` + o.tag + `>`);
   }
}

dashboard.component.html

<div class="row center-xs center-md center-lg center-sm">
  <div class="col-xs-4" *ngFor="let widget of widgets" >
      <div class="box">
         <div [innerHTML]="widget | sanitizeHtml"></div>
      </div>
  </div>
</div>

结果是：

<div _ngcontent-ynr-3="" class="row center-xs center-md center-lg center-sm">
  <!--template bindings={"ng-reflect-ng-for-of": "<app-widget-resume></app-widget-resume>,<app-widget-my-courses-learner></app-widget-my-courses-learner>,<app-widget-my-courses-teacher></app-widget-my-courses-teacher>,<app-widget-my-calendar></app-widget-my-calendar>,<app-widget-virtual-classes></app-widget-virtual-classes>"}-->
    <div _ngcontent-ynr-3="" class="col-xs-4">
      <div _ngcontent-ynr-3="" class="box">
         <div _ngcontent-ynr-3="" ng-reflect-inner-h-t-m-l="<app-widget-resume></app-widget-resume>"><app-widget-resume></app-widget-resume></div>
      </div>
  </div><div _ngcontent-ynr-3="" class="col-xs-4">
      <div _ngcontent-ynr-3="" class="box">
         <div _ngcontent-ynr-3="" ng-reflect-inner-h-t-m-l="<app-widget-my-courses-learner></app-widget-my-courses-learner>"><app-widget-my-courses-learner></app-widget-my-courses-learner></div>   
      </div>
  </div><div _ngcontent-ynr-3="" class="col-xs-4">
      <div _ngcontent-ynr-3="" class="box">
         <div _ngcontent-ynr-3="" ng-reflect-inner-h-t-m-l="<app-widget-my-courses-teacher></app-widget-my-courses-teacher>"><app-widget-my-courses-teacher></app-widget-my-courses-teacher></div>
      </div>
  </div><div _ngcontent-ynr-3="" class="col-xs-4">
      <div _ngcontent-ynr-3="" class="box">
         <div _ngcontent-ynr-3="" ng-reflect-inner-h-t-m-l="<app-widget-my-calendar></app-widget-my-calendar>"><app-widget-my-calendar></app-widget-my-calendar></div> 
      </div>
  </div><div _ngcontent-ynr-3="" class="col-xs-4">
      <div _ngcontent-ynr-3="" class="box">
         <div _ngcontent-ynr-3="" ng-reflect-inner-h-t-m-l="<app-widget-virtual-classes></app-widget-virtual-classes>"><app-widget-virtual-classes></app-widget-virtual-classes></div>
      </div>
  </div>
</div>

最后，我的组件未呈现，我不知道如何解决我的问题

Answer 1

不可能那样做。您需要编译这些组件，以便angular将评估每个标记，将html转换为其模板并初始化其控制器（类）。从rc5开始，您无法编译单个组件，但需要将它们放在NgModule中。你应该能够找到它像＃34; Angular 2动态编译模块＆＃34; Angular2 RC5 dynamically compile component with correct module

innerHTML不会强制角度来评估标签并将它们转换为组件

如何使用ngFor通过名称实现angular2组件？

1 个答案: