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

Question

How to import a svg on based on the user role if its admin or users.

cause right now my code is like this:

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>

and I have more svg. what I'm trying to do now is to less the code from the file layout.ts by calling the svg file.

for example this svg is for admin only.

this svg is for advisor only.

this svg is for students only.

svg1 - admin svg2 - advisor svg3 - student

Answer 1

if we has differents.svg, we can do some like

<img [src]="role=='admin'?'assets/svg1.svg':
            role=='advisor'?'assets/svg2.svg':
            'assets/svg3.svg'">

Or create an auxiliar variable

images={
  admin:'assets/svg1.svg',
  advisor:'assets/svg2.svg',
  student:'assets/svg3.svg'
}
//and use
    <img [src]="images[role]'">