如何根据角度中的当前用户角色导入svg

Question

如果是管理员或用户，如何根据用户角色导入 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 - 学生

Answer 1

如果我们有不同的 .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]'">