html - 角度材质导航无法正常工作
问题描述
Angualr innerHtml 不能像 html 文件中的 html 代码那样正常工作。
我尝试使用带有innerhtml的角度的引导多级示例,例如https://bootsnipp.com/snippets/4qgR,它根本不起作用。
我认为它会导致 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 解决这类问题。
解决方案
你不能用 innerHtml 注入 Angular 组件。Angular 组件是经过编译的,不能在运行时注入到 DOM 中。您应该在模板中使用 Angular Material 组件。
推荐阅读
- python - 做简单的python递归时出现问题
- mqtt - 当我在 verneMQ 集群中重新启动代理时,排队的消息会丢失
- javascript - 我想点击一个单选按钮
- python - tkinter 函数如何处理它作为参数的列表,一个接一个,一个接一个?
- python - 我如何让机器人不仅考虑自己
- python - 为什么 selenium 只迭代 5 次而不是完成数据集
- python - 如何在 Python 中使用 urlparse 优雅而安全地从部件创建 URL
- powershell - 在 Powershell 中获取具有其他属性的文件哈希
- visual-c++ - 如何在 Visual Studio 中更改警告级别
- archunit - 是否存在一种使用 ArchUnit 验证任何方法都不会引发任何异常的方法?