如何解决如何基于angular中的当前用户角色导入svg
如何根据用户角色(如果是管理员或用户)导入svg。
因为现在我的代码如下:
layout.ts
<div class="layout-body h-100 ">
<ng-container [ngTemplateOutlet]="svgBuilding"></ng-container>
</div>
<svg version="1.1" id="Layer_1" class="h-100 w-100" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1035.8 534.8"
style="enable-background:new 0 0 1035.8 534.8;" xml:space="preserve">
<style type="text/css">
g.building {
fill: #FFFFFF;
}
g.building:hover {
fill: #e2e2e2 !important;
cursor: pointer;
}
.bldg-name {
fill: #242323;
stroke: #242323;
stroke-width: .5;
}
.st1,.st2,.text {
fill: #909090;
}
.st3 {
fill: none;
stroke: #000000;
stroke-width: 1.68;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st4 {
fill: none;
stroke: #000000;
stroke-width: 0.48;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st5 {
font-family: 'CordiaNew';
}
.st6 {
font-size: 3.141px;
fill: #0000FF;
stroke: #000000;
stroke-miterlimit: 10;
}
.st7 {
fill: none;
stroke: #000000;
stroke-miterlimit: 10;
}
.st8 {
font-size: 5.4622px;
}
.st9 {
font-family: 'AngsanaNew-Bold';
}
.st10 {
font-size: 33.0262px;
}
.st11 {
fill: #FFFE00;
}
.st12 {
fill: none;
stroke: #F8D731;
stroke-width: 0.48;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st13 {
fill: #00FFFF;
stroke: #DDA56E;
stroke-width: 0.48;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st14 {
fill: #00FFFF;
}
</style>
<g id="building_a" class="building" (click)="openBuilding('BLDGA')">
<path class="st0" d="M306.3,171.4v62.7H166.1v-1.8c-0.7,0-1.7,0.8-2,1.1v0.8H114c0.4,0.9,0.6,1.9-0.1,1.8c-1-0.2-1.3-1.2-1.3-1.8
h-10.3v-62.7h23.9v-0.1h43.1v0.1h14.4v-7.7h46.7v7.7h75.9V171.4z" />
<foreignObject x="240" y="170" width="75px" height="50px" style="position:relative;">
<xhtml:div xmlns="http://www.w3.org/1999/xhtml">
<div *ngIf="count('BLDGA')">
<div class="mechanic">
<nz-badge [nzCount]="mechCount('BLDGA') || 0">
<img src="./assets/images/room/room.png" width="45px" height="35px" />
</nz-badge>
</div>
</div>
</xhtml:div>
</foreignObject>
.....
....
...
..
</svg>
,我还有更多svg。我现在想做的是减少文件layout.ts
中的代码
通过调用svg文件。
例如,此svg仅用于管理员。
此svg仅用于顾问。
此svg仅适用于学生。
svg1-管理员 svg2-顾问 svg3-学生
解决方法
如果.svg不同,我们可以做类似的事情
<img [src]="role=='admin'?'assets/svg1.svg':
role=='advisor'?'assets/svg2.svg':
'assets/svg3.svg'">
或创建一个辅助变量
images={
admin:'assets/svg1.svg',advisor:'assets/svg2.svg',student:'assets/svg3.svg'
}
//and use
<img [src]="images[role]'">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。