Угловой лучший способ взаимодействия с маршрутизатором из HTML ввода текста - PullRequest
Новая
       11

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

0 голосов
/ 30 августа 2018

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

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

Вывод Froala: 

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

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

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

Edit: Мне не нужна фроала. Я могу создать свой собственный редактор. Но мне нужно преобразовать ввод 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>

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

Ответы [ 2 ]

0 голосов
/ 16 сентября 2018

Как сказал Nasiruddin Saiyed, вам следует использовать 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;
      }
  }
0 голосов
/ 30 августа 2018

Вы можете сделать это, используя @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 , если вы хотите проверить полный поток и код.

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

...