Маршрутизатор Angular 8 перезагружает всю страницу вместо частичной загрузки. Почему?

Я разрабатываю веб-приложение с использованием Angular 8, где мне нужно создать динамическое меню из базы данных. Прежде чем приступить к окончательной работе, я провел небольшой тест, в котором получил неожиданный результат. я установил переменную в файле .ts для хранения кода для меню, а затем привязал эту переменную к файлу html с помощью [innerHTML]. когда я нажимаю на ссылку, ожидается, что компонент загружается, но проблема заключается в том, что вместо частичной загрузки он выполняет полную перезагрузку страницы. Я не понимаю, почему частичный рендеринг не происходит. Пожалуйста, помогите мне в этом отношении..

main.component.ts

import { Component, OnInit } from '@angular/core';
import { MenuService } from 'services/menu.service';
import { MenuDTO } from 'dto/MenuDTO';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styles: []
})
export class MainComponent implements OnInit {
  menuStr: string;
ngOnInit() {
   this.menuStr = '<a routerLink="Supplier" href="/main/Supplier" >Supplier</a>';
  }
}

main.component.html

<div [innerHTML]="menuStr | safehtml ">

  </div>
  <a routerLink="vhe" href="/main/vhe" >Vehicle List</a>

Здесь Safehtml — это канал, который выглядит следующим образом

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';


@Pipe({ name: 'safehtml' })
export class SafeHTMLPipe implements PipeTransform  {
  constructor(private sanitizer: DomSanitizer) { }


  public transform(value: any, type: string): any {

    return this.sanitizer.bypassSecurityTrustHtml(value);

  }
}

Итак, вот две ссылки 1. Поставщик и 2. Список транспортных средств. Первая ссылка создается путем привязки опции [innerHTML] и второй ссылки непосредственно к коду HTML. при нажатии на первый компонент ссылки отображается с полным обновлением страницы, а при нажатии на второй подобный компонент отображается частично. Мой вопрос для первой ссылки, почему компонент отображается с полным обновлением страницы? Почему компонент не отображается частично, когда ссылка создается путем привязки [innerHTML]?


angular angular8 angular-routerlink angular-router
person himadri    schedule 14.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам не нужно указывать href в теге привязки, вот пример приложения

stackblitz

вместо отправки html с сервера будет лучше отправлять только маршруты в JSON и прокручивать их, например:

ts
this.collection= [{"title":"Vehicle List",routerLink:"/main/vhe"},"title":"Supplier",routerLink:"/main/Supplier"}];

html
<a *ngFor="let item of collection"  [routerLink]="item.routerLink">{{item.title}}</a>
person Tony    schedule 14.10.2020
comment
Дорогой @tTony, спасибо за ваше время и повтор. Решение с *ngFor невозможно при наличии вложенных меню. я имею в виду, если мне нужно меню, например, Настройки --> Основные настройки --> Поставщик | Клиент |.. В этом случае нам нужен рекурсивный цикл. Как я могу сделать это в HTML - person himadri; 15.10.2020
comment
вы можете использовать любой из них, если это json, будет легко интегрировать панировочные сухари и все такое... Надеюсь, проблема с перезагрузкой страницы решена. - person Tony; 15.10.2020