Html 禁用角度2消毒

我已经看到了这个问题的一些答案，并尝试了所有答案，但仍然不起作用。我有点想在angular 2中写一个CMS；因此，有人将HTML放在后端，有人将HTML呈现在前端。我可以使用

DomSanitizer.bypassSecurityTrustHtml（）

显示一些HTML，但不能显示其他HTML。例如，我可以添加一个

，但是

测试

被呈现为一个普通的HTML按钮。我还有一个

lesson组件

w/a

lesson

选择器，但它根本没有在页面上呈现，我确实在inspector中看到了

HTML

如何（如果可能）在DB页面上显示组件？代码如下：

lesson.ts

import { Component, Inject, Input, SecurityContext } from '@angular/core';
import { MdDialog, MD_DIALOG_DATA } from '@angular/material';
import { Lesson, LessonService } from '../lesson.service';
import { DomSanitizer, SafeHtml} from '@angular/platform-browser';

@Component({
  selector: 'lesson',
  templateUrl: './lesson.html',
  styleUrls: ['./lesson.scss']
})
export class LessonComponent {
  @Input() lessonID: number = 0;
  @Input() questionID: string = '';

  lesson: Lesson;
  constructor(public service: LessonService, public dialog: MdDialog, private sanitizer: DomSanitizer) {  }

  getLesson(): object {
    if(!this.service.getLesson(this.lessonID)) { return {}; }
    let lesson = this.service.getLesson(this.lessonID)['pages'].filter(lesson => {
      return lesson['id'] === this.questionID;
    })[0];
    if(lesson && lesson['buttons']) {
      this.service.buttons = lesson['buttons'];
    } else {
      this.service.buttons = [];
    }
    lesson['test'] = this.sanitizer.bypassSecurityTrustHtml(lesson['content']);
    return lesson;
  }

  doClick(btnID) {
    let button = this.getLesson()['buttons'].filter(btn => {
      return btn['id'] === btnID;
    })[0];
    this.dialog.open(ExtraDialog, { data: button['content'] });
  }
}

@Component({
  selector: 'extra-dialog',
  template: `{{data}}`
})
export class ExtraDialog {
  constructor(@Inject(MD_DIALOG_DATA) public data: any) {}
}

import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';

export class Lesson {
  constructor(public id: number, public pages: Object[]) {  }
}

@Injectable()
export class LessonService {

  private lessons: Lesson[] = [];
  public buttons: object[];
  constructor(public db: AngularFireDatabase) {
    this.db.object('/lessons', { preserveSnapshot: true }).subscribe(lessons => {
      this.lessons = [];
      lessons.forEach(lesson => {
        let pages = [];
        if(lesson.val()['pages']) {
          Object.keys(lesson.val()['pages']).forEach(key => {
            let page = {
              id: key,
              title: lesson.val()['pages'][key]['title'],
              content: lesson.val()['pages'][key]['content']
            };
            let buttons = lesson.val()['pages'][key]['buttons'];
            if(buttons) {
              page['buttons'] = [];
              Object.keys(buttons).forEach(key => {
                page['buttons'].push({
                  content: buttons[key]['content'],
                  icon: buttons[key]['icon'],
                  id: key
                });
              });
            }
            pages.push(page);
          });
        }
        this.lessons.push(new Lesson(
          lesson.key,
          pages
        ));
      });
    });
  }

  getLessons() { return this.lessons; }

  getLesson(id: number): Lesson {
    return this.lessons.filter(lesson => {
      return lesson['id'] == id;
    })[0];
  }

}

lesson.html

<div *ngIf="!getLesson()" >
  Error: Lesson {{lessonID}} -> question {{questionID}} is not a known lesson or question. Please click <a routerLink="/lesson/1">here</a> to go to the first lesson.
</div>
<div *ngIf="getLesson() && getLesson()['buttons']">
  <span *ngFor="let button of getLesson()['buttons']">
    <button md-mini-fab (click)="doClick(button.id)"><md-icon>{{button.icon}}</md-icon></button>
  </span>
</div>
<div *ngIf="getLesson()">
  <h2>{{getLesson()['title']}}</h2>
  <p [innerHTML]="getLesson()['test']"></p>
</div>

---

我有一种感觉，Angular不会触及您通过

bypassSecurityTrustHtml（）

传递给它的HTML—这样可以正确呈现正常元素，但自定义元素不会，因为HTML只是通过通道传递到DOM，而不执行组件逻辑。浏览器只会看到你的

，并将其视为垃圾。由于该方法的命名表明，这可能不是一个明智的解决方案的最佳方法，但我不是一个有棱角的用户：-）另外：您可能不想每次都通过访问器函数访问您的

课程。pages

通过访问器函数访问它，为什么不在迭代之前将其保存在临时变量中

let pageDto=lessure.val（）['pages']；

。