1

Tengo un menú que funciona a medias, lo baje de un template que no tiene documentación, pero la solución parece sencilla.

menu.component.html

<div class="app-sidebar__inner">
  <ul class="vertical-nav-menu">
    <li class="app-sidebar__heading">Menu</li>
    <li *ngFor="let item of list" routerLinkActive="active">
      <ng-container *ngIf="item.children && item.children.length > 0" >
        <a href="">
      </ng-container>

      <ng-container *ngIf="!item.children">
        <a [routerLink]="[ item.route ]">
      </ng-container>

        <i [class]="'metismenu-icon pe-7s-' + item.icon"></i>
        <span class="fs8">{{ item.name }}</span>
        <i *ngIf="item.children && item.children.length > 0" 
          class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
      </a>
      <ul *ngIf="item.children && item.children.length > 0">
        <li *ngFor="let child of item.children">
          <a [routerLink]="[ item.route + child.route ]">
            <span class="fs7">{{ child.name }}</span>
          </a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Necesito identificar si la iteración del ng-for tiene un índice que se llame childrenentonces esa opción del menú se convierte en una opción desplegable que no debe llevar a ningún lado, únicamente hacer la animación de desplegar las rutas hijas. En caso que no haya el índice children entonces es una ruta que debe controlar Angular con routerLink por ende implementé este pequeño truco que no sirve

  <ng-container *ngIf="item.children && item.children.length > 0" >
    <a href="">
  </ng-container>

  <ng-container *ngIf="!item.children">
    <a [routerLink]="[ item.route ]">
  </ng-container>

Y el error que marca es

ERROR Error: Uncaught (in promise): Error: Template parse errors: Unexpected closing tag "ng-container". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags

¿Qué me recomendarían hacer?

menu.component.ts

import { Component, OnInit } from '@angular/core';
import HeaderList from '../interfaces/header-list.interface';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.sass','../app.component.sass']
})
export class MenuComponent implements OnInit {

  public list: Array<HeaderList> = [
    {
      icon: 'home',
      name: 'Página principal',
      route: '/'
    },
    {
      icon: 'cash',
      name: 'Cálculo de comisiones',
      route: '/calculo-comisiones'
    },
    {
      icon: 'config',
      name: 'Configuración layout',
      route: '/subir-layout'
    },
    {
      icon: 'cloud-upload',
      name: 'Carga layout',
      route: '/carga-layout'
    },
    {
      icon: 'safe',
      name: 'Aprovisionamiento',
      route: '/aprovisionamiento'
    },
    {
      icon: 'calculator',
      name: 'Comisiones',
      route: '/comisiones',
      children: [
        {
          name: 'Autorización de comisiones',
          route: '/autorizacion-comisiones'
        },
        {
          name: 'Consulta de status comisiones',
          route: '/consulta-comisiones'
        },
      ]
    }
  ];
  constructor() {
   }

  ngOnInit() {
  }

}
3
  • 1
    bueno el error viene por esta etiqueta que no esta cerrada <a href=""> deberia <a href=""></a>
    – hawks
    Commented el 17 abr. 2020 a las 20:41
  • Si claro, pero es la única que tiene una modificación de atributo Commented el 17 abr. 2020 a las 21:35
  • Tal como dice hawks creo que te hace falta es cerrarlas, angular no compilara bien si hay errores en el html, la solución mas fácil es cerrarlas, entonces se solucionaria el error automáticamente.
    – Layer
    Commented el 17 abr. 2020 a las 22:36

1 respuesta 1

0

Hay dos errores, el primero es que no estas cerrando las etiquetas <a></a> por lo tanto angular nunca va a compilar bien y siempre te saltara este error.

Lo segundo es que si estas usando lazyLoad que es lo mas seguro ya que es una excelente forma de manejar las rutas de angular, estas añadiendo mal las rutas:

La ruta la pones tu de la siguiente manera:

<a [routerLink]="[ item.route ]">

Lo cuál es incorrecto, yo en un proyecto de ionic que estoy desarrollando, lo tengo de la siguiente manera y me funciona (ionic funciona con angular):

[routerLink]="'/favourites'"

Por lo tanto en tu caso debe ser:

<a [routerLink]="item.route"></a>

Y para los children sería así:

<a [routerLink]="item.route + child.route"></a>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.