angular - 为什么我不断收到关于我的结束标签的错误？

Question

所以，我用角度编写了一个 sidnav 组件，但它似乎出现故障，我不明白为什么。问题是，我只想在窗口大小小于 992px 时显示我的 sidenav。我写了一个 window:resize 事件来检查这个。现在，当我尝试检查它是否有效时，我收到了这个错误：Uncaught Error: Template parse errors: Unexpected closing tag "app-side-nav". It may happen when the tag has already been closed by another tag.

我看不出这个错误可能发生在哪里：

标头组件

<header>
  <!-- <img [src]="'data:image/jpg;base64,'+image.content"> -->
  <div class="navbar-fixed">
    <nav class="nav-wrapper">
      <a href="#!" class="brand-logo center">
        <img src="../../assets/images/Logo.png" alt="logo" class="logo center hide-on-large-only" />
        <span class="BrandName hide-on-med-and-down">Digitized</span>
      </a>

      <!-- <a href="#" class="sidenav-trigger" (click)="sideNav()">
        <i class="material-icons">menu</i>
      </a> -->

      <app-side-nav *ngIf="loadComponent" data-cy=sideNavComponent" (window:resize)="showSideNav($event)"></app-side-nav>

      <ul class="left hide-on-med-and-down">
        <li><a class="navOption" [routerLink]="['images']">Photography</a></li>
        <!-- <li><a class="navOption">Digital Art</a></li> -->
        <li><a class="navOption" [routerLink]="['carousel']">B-roll & Timelapse</a></li>
        <li><a class="navOption" [routerLink]="['contact']">Contact</a></li>
      </ul>
      <ul class="right hide-on-med-and-down">
        <li><a class="navOption" (click)="openDialogLogin()">Login</a></li>
        <li><a class="navOption" (click)="openDialogRegister()">Register</a></li>
      </ul>
    </nav>
  </div>
</header>
<ng-content></ng-content>

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material';
import { RegisterFormComponent } from '../authentication/register-form/register-form.component';
import { LoginFormComponent } from '../authentication/login-form/login-form.component';
//import { trigger, transition, animate, keyframes } from '@angular/animations';
import { Image } from '../image/image.model';
import { ActivatedRoute } from '@angular/router';
import { ImageDataService } from '../image/image-data.service';
//import * as kf from './keyframes';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
  // animations: [
  //   trigger('sideNavAnimator', [
  //     transition('kf =>', animate(1000, keyframes(kf.slideInLeft)))
  //   ])
  // ]
})
export class HeaderComponent implements OnInit {
  public animationState: string;
  public image: Image;
  public loadComponent: boolean;
  constructor(
    public dialog: MatDialog,
    private _route: ActivatedRoute,
    private _imageService: ImageDataService
  ) {
    this.loadComponent = false;
    //_route.data.subscribe(item => (this.image = item));
  }

  ngOnInit() {}

  openDialogLogin(): void {
    const dialogRef = this.dialog.open(LoginFormComponent, {
      width: '300px'
    });
    // dialogRef.afterClosed.subscribe(result => {});
  }

  openDialogRegister(): void {
    const dialogRef = this.dialog.open(RegisterFormComponent, {
      width: '300px'
    });
    //dialogRef.afterClosed.subscribe(result => {});
  }

  startAnimation(state: string) {
    console.log(state);
    if (!this.animationState) {
      this.animationState = state;
    }
  }

  resetAnimationState() {
    this.animationState = '';
  }

  showSideNav(event) {
    if (window.innerWidth <= 992) {
      this.loadComponent = true;
    } else {
      this.loadComponent = false;
    }
  }
}

（不要介意动画，这是一个wip）

西德纳夫

<!-- <mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-nav-list>
      <a mat-list-item [routerLink]="['']">Photography</a>
      <a mat-list-item [routerLink]="['']">B-roll & Timelapse</a>
      <a mat-list-item [routerLink]="['']">Contact</a>
      <a mat-list-item [routerLink]="['']">Login</a>
      <a mat-list-item [routerLink]="['']">Register</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <!-- <button [...]>
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button> -->
<!-- <span>Digitized</span>
    </mat-toolbar>
    <ng-content></ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>  -->

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

@Component({
  selector: 'app-side-nav',
  templateUrl: './side-nav.component.html',
  styleUrls: ['./side-nav.component.css']
})
export class SideNavComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

如果您需要更多详细信息，请告诉我！

标签： angularangular-material

Answer 1

我遇到了同样的错误......在我的情况下，我忘记在显示错误的标签之前放置一个结束锚标签。

</a>