Question

Angualr innerHtml无法像html文件中的html代码那样正常工作。

我尝试将https://bootsnipp.com/snippets/4qgR这样的引导多级示例与innerhtml一起使用，它根本不起作用。

我认为这会导致Jquery。然后我尝试导入Jquery，使用innerhtml完全不起作用。而且我也使用bypassSecurityTrustHtml进行工作。但效果不好。

仅当我将html代码复制到html文件中时，该功能才有效。

由于应该从数据库中获取菜单数据，因此我应该使用innerHtml，然后动态创建菜单导航栏

我认为使用innerhtml可以使角形材质起作用， https://material.angular.io/components/menu/overview#nested-menu，它适用于不使用innerthml的html ...

In component.ts

this.innerHtmlSecureResult = `<button mat-button [matMenuTriggerFor]="animals">Animal index</button>
<button mat-button [matMenuTriggerFor]="animals2">Animal index2</button>
<button mat-button [matMenuTriggerFor]="animals3">Animal index3</button>

<mat-menu #animals="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="vertebrates"><a href="#" style="text-decoration:none; color: black;">Vertebrates</a></button>
  <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
</mat-menu>

<mat-menu #animals2="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
  <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
</mat-menu>

<mat-menu #animals3="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
  <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
</mat-menu>

<mat-menu #vertebrates="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
  <button mat-menu-item [matMenuTriggerFor]="amphibians">Amphibians</button>
  <button mat-menu-item [matMenuTriggerFor]="reptiles">Reptiles</button>
  <button mat-menu-item>Birds</button>
  <button mat-menu-item>Mammals</button>
</mat-menu>

<mat-menu #invertebrates="matMenu">
  <button mat-menu-item>Insects</button>
  <button mat-menu-item>Molluscs</button>
  <button mat-menu-item>Crustaceans</button>
  <button mat-menu-item>Corals</button>
  <button mat-menu-item>Arachnids</button>
  <button mat-menu-item>Velvet worms</button>
  <button mat-menu-item>Horseshoe crabs</button>
</mat-menu>

<mat-menu #fish="matMenu">
  <button mat-menu-item>Baikal oilfish</button>
  <button mat-menu-item>Bala shark</button>
  <button mat-menu-item>Ballan wrasse</button>
  <button mat-menu-item>Bamboo shark</button>
  <button mat-menu-item>Banded killifish</button>
</mat-menu>

<mat-menu #amphibians="matMenu">
  <button mat-menu-item>Sonoran desert toad</button>
  <button mat-menu-item>Western toad</button>
  <button mat-menu-item>Arroyo toad</button>
  <button mat-menu-item>Yosemite toad</button>
</mat-menu>

<mat-menu #reptiles="matMenu">
  <button mat-menu-item>Banded Day Gecko</button>
  <button mat-menu-item>Banded Gila Monster</button>
  <button mat-menu-item>Black Tree Monitor</button>
  <button mat-menu-item>Blue Spiny Lizard</button>
  <button mat-menu-item disabled>Velociraptor</button>
</mat-menu>`;

In component.html
<div *ngIf="login" [innerHTML]="innerHtmlSecureResult | safe : 'html'" appRouteTransformerDirective></div>

我想知道如何使用innerHtml解决这类问题。

Answer 1

您不能使用innerHtml注入Angular组件。角组件已编译，无法在运行时注入到DOM中。您应该在模板中使用Angular Material组件。

角度材质导航无法正常工作

1 个答案: