ссылки на функциональность компонента в innerHTML не работают - PullRequest
Новая
       40

ссылки на функциональность компонента в innerHTML не работают

0 голосов
/ 01 декабря 2018

Попытка заставить ngbTooltip работать в безопасных пределах innerHTML.Сначала я подумал, что это не сработает, потому что вставляемые данные извлекаются асинхронно, а представление рендеринга + связывание с функциональностью ngB уже сделано, поэтому реализовано разрешение маршрутов.Однако все разрешается до того, как представление отрисовывается, однако .. всплывающая подсказка все еще не работает.

Обратите внимание (!), Что, когда подсказка жестко запрограммирована в соответствующем шаблоне, все работает, как и другие ngB-функциональность и т.д ...

Подсказка - всего лишь тривиальный пример.Мне нужно больше вещей для работы, таких как модалы, 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 { }

Пример JSON с HTML-кодом для вставки

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

1 Ответ

0 голосов
/ 01 декабря 2018

Вы можете указать тип элемента в структуре данных вместе с содержанием всплывающей подсказки: 

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 для демонстрации.

...