угловой лучший способ взаимодействия с маршрутизатором из ввода текста html

Я использую текстовый редактор froala для хранения некоторых пользовательских данных. Я хочу создать определенный вывод в тексте html, который создает ссылки, способные взаимодействовать с маршрутизатором или с приложением в целом (функция вызова в контроллерах и т. д.).

Каков наилучший способ «переосмыслить» html-ссылки как маршрутизируемые ссылки, чтобы страница не перезагружалась?

вывод фроала:

<a href="/someRoute">some text</a>

станет после лечения:

<a [routerLink]="['/someRoute']">some text</a>

Редактировать: Мне не нужна фроала. Я могу создать свой собственный редактор. Но мне нужно преобразовать пользовательский ввод html в ссылку маршрутизатора или функции компонента

Редактировать 2: возможно ли переинтерпретировать html как

<app-mycomponent [someVariable]="someVariable"></app-mycomponent>

Вот скелет того, что мне нужно: https://stackblitz.com/edit/angular-tnnw8n?embed=1&file=src/app/hello.component.ts

Я могу разобрать html, чтобы найти мои конкретные теги и использовать *ngIf в представлении.

<ng-container *ngFor="let parsedHtml of arrayOfHtmlPart">
  <ng-container *ngIf="isHtml(parsedHtml)">
    {{parsedHtml}}
  </ng-container>
  <ng-container *ngIf="!isHtml(parsedHtml)">
    <app-mycomponent></app-mycomponent>
  </ng-container>
</ng-container>

но это не элегантно


angular froala
person jolineck    schedule 30.08.2018    source источник
comment
Вы не можете. Входные данные Fraola являются входными данными после сборки: после сборки ваше приложение больше не имеет routerLink. Попробуйте предоставить минимальный воспроизводимый пример, воспроизводящий ваш вариант использования на stackblitz.io, и я мог бы предложить вам обходной путь.   -  person    schedule 30.08.2018
comment
пожалуйста, покажи свой код   -  person harkesh kumar    schedule 30.08.2018
comment
Я добавил немного кода...   -  person jolineck    schedule 30.08.2018

Ответы (2)


arrow_upward
1
arrow_downward

Как сказал Насируддин Сайед, вы должны использовать Nasiruddin Saiyed @HostListener, а затем определить теги A, которые вы хотите рассматривать как ссылки маршрутизатора. Если для класса элемента установлено значение «content-inside», он будет иметь ссылку на маршрутизатор (без перезагрузки).

@HostListener('click', ['$event'])
    public onClick(event) {
      if (event.target.tagName === 'A' && event.target.getAttribute('class') === 'content-inside') {
        this.router.navigate([event.target.getAttribute('href')]);
        event.preventDefault();
      } else {
        return;
      }
  }
person lil-works    schedule 16.09.2018

arrow_upward
0
arrow_downward

Вы можете сделать это, используя @HostListener и @Input Событие привязки и следующий пример TableRow, в котором я выполнил перенаправление, используя Router:

Это компонент, объявленный в HTML другого компонента как

<app-table-row [takeMeTo]='"/redirected"'></app-table-row>

и это будет его фактический класс компонента

export class TableRowComponent implements OnInit {

  @Input() takeMeTo:string;

  @HostListener('click', ['$event.target'])
    onClick(btn) {
      console.log(this.takeMeTo);
      this.router.navigate([this.takeMeTo]);      
  };
  constructor(public router : Router) { }

  ngOnInit() {
  }
}

Вот Stackblitz, если вы хотите проверить весь процесс и код.

Удачного кодирования!! :)

person Nasiruddin Saiyed    schedule 30.08.2018
comment
Спасибо за ваш код. Это работает! но я не понимаю, как реализовать это из html-текста - person jolineck; 30.08.2018
comment
@jolineck, вы можете обратиться к ссылкам, которые я предоставил @HostListener and @Input. - person Nasiruddin Saiyed; 31.08.2018