angular - 点击事件不适用于角度通用应用程序

Question

我有一个具有这样的功能和点击事件的组件：

header.component.html：

        <button (click)="menu()"
                class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
                aria-label="Main menu"
                aria-expanded="false">

header.component.ts：

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  url: string;
  isHome: boolean;
  showDropdown = false;
  menuItems = [
    {name: 'About Us', route: 'about-us', isOuter: true},
    {name: 'Technology', route: 'features', isOuter: false},
    {name: 'Mission', route: 'headline', isOuter: false},
    {name: 'Sign Up', route: 'contact', isOuter: false},
  ];

  constructor(private router: Router) {}

  ngOnInit(): void {
    this.isHome = this.router.url === '/';
    const url = 'url';
    this.router.events.subscribe((event) => {
      this.isHome = event[url] && (event[url] === '/' || event[url].includes('/#'));
      this.showDropdown = false;
    });
  }

  /** Mobile */

  menu(): any {
    this.showDropdown = ! this.showDropdown;
  }

  getMenuClass(): string {
    return this.showDropdown ? 'block' : 'hidden';
  }

  getMenuOpenClass(): string {
    return this.showDropdown ? 'block' : 'hidden';
  }

  getMenuClosedClass(): string {
    return this.showDropdown ? 'hidden' : 'block';
  }
}

我刚刚安装了用于服务器端渲染的 Angular Universal，由于某种原因，单击事件无法正常工作，并且该功能没有被触发我的showDropdown标志工作正常，我将其硬编码为true并且它工作正常。

标签： angularangular-universal