innerHTML 中对组件功能的引用不起作用

Question

试图让 ngbTooltip 在 innerHTML 的安全范围内工作。起初我认为这不起作用，因为要插入的数据是异步检索的，并且视图渲染 + 捆绑 ngB 功能已经完成，所以实现了路由解析。在渲染视图之前，一切都解决得很好，但是，.. 工具提示仍然不起作用。

请注意 (!)，当工具提示被硬编码在相应的模板中时，其他 ngB 功能等就可以正常工作...

工具提示只是一个微不足道的例子。我需要更多功能才能发挥作用，例如模态框、弹出框、对组件中函数的引用。

在渲染后查看 Dom，它只是正常的 HTML，没有孤立的范围或其他。

组件

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {
  quote: string;
  isLoading = false;

  public sanitizedHtml: any;

  constructor(private portareServices: PortareServices,
    private sanitizer: DomSanitizer,
    private route: ActivatedRoute
  ) {
    this.sanitizedHtml = this.sanitizeHTMLstring(this.route.snapshot.data.content.pageContent);
  }

  public sanitizeHTMLstring(htmlStr: string) {
    return this.sanitizer.bypassSecurityTrustHtml(htmlStr);
  }
}

路由

const routes: Routes = [
  {
    path: 'content',
    resolve: {
      content: ContentResolve
    },
    component: HomeComponent,
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: '',
    resolve: {
      content: ContentResolve
    },
    component: HomeComponent,
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

示例 JSON 将插入 HTML

{ "pageContent": "<button type=\"button\" class=\"btn btn-outline-secondary mr-2\" placement=\"bottom\" [ngbTooltip]=\"htmlContent\">Tooltip on top<\/button>" }

Answer 1

您可以在数据结构中指定元素类型，以及工具提示内容：

data = { type: "input", content: "My initial text", tooltip: "This is a tooltip" };
data = { type: "button", content: "My caption", tooltip: "Hello world!" };

在模板中，使用 ng-switch 指令插入适当的元素。工具提示内容和可能的其他值是通过数据绑定提供的：

<ng-container [ngSwitch]="data.type">
  <button *ngSwitchCase="'button'" ... [ngbTooltip]="data.tooltip">{{data.content}}</button>
  <input *ngSwitchCase="'input'" ... [ngbTooltip]="data.tooltip" [value]="data.content">
</ng-container>

有关演示，请参阅 this stackblitz。

innerHTML 中对组件功能的引用不起作用

references to Component functionality within innerHTML not working

angular

ng-bootstrap

dependency-resolver