Question

试图让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>" }

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中的组件功能的引用不起作用

1 个答案: