0

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

请注意（！），当工具提示在相应的模板中硬编码时，其他 ngB 功能等也可以正常工作......

工具提示只是一个简单的例子。我需要更多的东西来运行，比如 Modals、PopOvers、对组件中函数的引用。

渲染后查看 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 { }

带有要插入的 HTML 的示例 JSON

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

4

1 回答 1

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>

请参阅此 stackblitz以获取演示。

于 2018-12-01T18:14:21.933 回答