Angular 5 ngSwitch не работает

В моем приложении я пытаюсь реализовать панель навигации на основе ролей пользователя. Если пользователь является администратором, он должен отображать другое меню, а для обычного пользователя он должен отображать меню только для пользователя. Я использую ngSwitch для ограничения панели навигации, но не могу этого сделать. Пожалуйста, посмотрите.

<div [ngSwitch] = "myrole">
  <ng-template *ngSwitchCase = "'Admin'">
    <nav class="navbar navbar-expand-sm bg-primary navbar-dark">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" routerLink = '/home' routerActive = 'active'>Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink = '/logout' routerActive = 'active' >Log Out</a>
          </li>
          <li class="nav-item" style="text-align:right">
            <span class="nav-link navbar-right">{{username}}</span>
          </li>
        </ul>
      </nav>
    </ng-template>
    <ng-template *ngSwitchCase = "'NoUser'">
      <nav class="navbar navbar-expand-sm bg-primary navbar-dark">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" routerLink = '/home' routerActive = 'active'>Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink = '/login' routerActive = 'active' >Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink = '/signup' routerActive = 'active' >Sign UP</a>
          </li>
        </ul>
      </nav>
    </ng-template>

    </div>

angular navbar angular5 ng-switch
person Hasan Zubairi    schedule 31.03.2018    source источник
comment
Будьте последовательны в цитировании и интервалах. HTML и так достаточно сложно читать. Произвольное смешивание ' и ", а также непостоянный интервал между тегами затрудняют чтение и приводят к ошибкам.   -  person Aluan Haddad    schedule 31.03.2018

Ответы (4)


arrow_upward
2
arrow_downward

Ваш синтаксис неверен, изменить

От

 <ng-template *ngSwitchCase = "'Admin'">

Кому

 <ng-template [ngSwitchCase] = "'Admin'">
person Sajeetharan    schedule 31.03.2018
comment
В качестве альтернативы вы можете полностью удалить <ng-template> и вместо этого использовать форму * структурной директивы шаблона для элемента <nav>, такого как <nav *ngSwitchCase="'Admin'" class="navbar navbar-expand-sm bg-primary navbar-dark">. В основном это ЛИБО * или <ng-template>. - person John; 31.03.2018
comment
Также пробовал [ngSwitchCase] ​​внутри навигационного тега. Не работает - person Hasan Zubairi; 31.03.2018

arrow_upward
0
arrow_downward

Вот код

HTML-шаблон — это

<div [ngSwitch] = "myrole">
  <ng-template [ngSwitchCase] = "'Admin'">
    <nav class="navbar navbar-expand-sm">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" >Log Out</a>
          </li>
          <li class="nav-item" style="text-align:right">
            <span class="nav-link navbar-right">{{'Test'}}</span>
          </li>
        </ul>
      </nav>
    </ng-template>
    <ng-template [ngSwitchCase] = "'NoUser'">
      <nav class="navbar navbar-expand-sm">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a href="/">Home</a>           
          </li>
          <li class="nav-item">
             <a href="/">Login</a>           
          </li>
          <li class="nav-item">
              <a href="/">Sign Up</a>          
          </li>
        </ul>
      </nav>
    </ng-template>

    </div>

файл ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-switch-exampl',
  templateUrl: './switch-exampl.component.html',
  styleUrls: ['./switch-exampl.component.css']
})
export class SwitchExamplComponent implements OnInit {

  myrole: string = 'Admin'
  constructor() { }

  ngOnInit() {
  }

}
person Vikas Garg    schedule 31.03.2018

arrow_upward
0
arrow_downward

с ng-template вам нужно использовать привязку свойств вместо структурной привязки. Поэтому измените FROM

<ng-template *ngSwitchCase = "'Admin'">

в

   <ng-template  [ngSwitchCase] = "'Admin'">

ИЛИ Есть другое решение

используйте ngSwitchCase в качестве структурной директивы, но без шаблона ng, т.е.

<div *ngSwitchCase = "'Admin'">
person Vikas Garg    schedule 31.03.2018
comment
Привет. Можете ли вы проверить реализацию, опубликованную в другом ответе? - person Vikas Garg; 31.03.2018

arrow_upward
0
arrow_downward

Извините, ребята, мой плохой. Роль исходит от службы, и она инициализирует роль как пустую строку при инициализации компонента. Поэтому в качестве решения я добавил еще один раздел, подобный этому

 <ng-template  [ngSwitchCase] = "''">......</ng-template>

Спасибо за ваши предложения.

person Hasan Zubairi    schedule 31.03.2018