Angular 8路由器会重新加载整个页面，而不是部分加载为什么？

问题描述

我正在使用Angular 8开发Web应用程序，需要从数据库创建动态菜单。在进行最后的工作之前，我做了一点测试，得到了意想不到的结果。我在.ts文件中设置了一个变量来保存菜单代码，然后通过[innerHTML]在HTML文件中绑定该变量。当我单击链接时，预期组件正在加载，但问题是不是部分加载，而是重新加载了整个页面。我不明白为什么不进行部分渲染。在这方面请帮助我。

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.车辆清单。 Frist链接是通过绑定[innerHTML]选项和直接在HTML Code上的第二个链接创建的。单击第一个链接时呈现的页面会刷新整页，而单击第二个链接的部分会部分渲染。我的问题是第一个链接，为什么用整页呈现的组件会刷新？为什么通过绑定[innerHTML]创建链接时组件没有部分呈现？

解决方法

您不必在锚标记上指定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>