角2打开菜单点击

Question

header.component.html有一个按钮，当你点击，菜单桅杆显示在users.component.html.中单击“添加类到”按钮。当单击标题中的按钮(没有jQuery)时，如何将类添加到菜单块？

header.component.ts

import {Component} from '@angular/core';
import {Router} from "@angular/router";
import {GlobalService} from "../../global.service";

@Component({
  selector: 'header',
  providers: [GlobalService],
  templateUrl: 'app/_components/header/header.component.html'
})

export class HeaderComponent{

  public activeMobileMenuAdmin = false;
  public activeClass = false;

  constructor(public router: Router, public globalService: GlobalService){

    router.events.subscribe((val) => {

      if (val.url === '/login' || val.url === '/users') {
        this.adminPanelView = false;
      } else {
        this.adminPanelView = true;
      }

      if (val.url === '/users'){
        this.adminMenuView = true;
        this.detectDeviceWidth();
      } else {
        this.adminMenuView = false;
      }

    });

    this.activeClass = globalService.activeClass;

  }

  admMenuShow(){
    this.activeClass = !this.activeClass;
  }

  ngOnInit() {
    this.detectDeviceWidth();
  }

  detectDeviceWidth() {
    if (window.innerWidth < 1024) {
      this.activeMobileMenuAdmin = true;
    } else {
      this.activeMobileMenuAdmin = false;
    }
  }

}

header.component.html

<div class="menu-icon show-on-sm" [ngClass]="{'active': activeClass}" (click)="admMenuShow();" *ngIf="adminMenuView">
<span></span>
<span></span>
<span></span>

​

users.component.ts

import {Component} from '@angular/core';
import {GlobalService} from "../../global.service";

@Component({
  selector: 'admin',
  providers: [GlobalService],
  templateUrl: 'app/admin/users/users.component.html'
})

export class AdminUsersComponent {
  private activeClass = true;
  constructor(public globalService: GlobalService){
    this.activeClass = globalService.activeClass;
  }
  admMenuShow(){
    this.activeClass = !this.activeClass;
  }
}

users.component.html

<div class="menu" id="admin-menu" [ngClass]="{'active': activeClass}">
<div class="contflex">
  <div class="h1">Test</div>
  <ul>
    <li class="active">List 1</li>
    <li>List 2</li>
    <li>List 3</li>
  </ul>
</div>

​

global.service.ts

import {Injectable} from '@angular/core';
import {Router} from '@angular/router';

@Injectable()
export class GlobalService {
  public user: Object = {};
  public hideMenu: boolean = true;
  public activeClass: boolean = false;

  constructor(public _router: Router) {}

  admMenuShow(){
    return this.activeClass = !this.activeClass;
  }

  onAuthError() {
    console.log('Works!');
  }
}

页面结构：

<header>
    ...
    <div class="menu-icon show-on-sm" [ngClass]="{'active': activeClass}" (click)="admMenuShow();" *ngIf="adminMenuView">
        <span></span>
        <span></span>
        <span></span>
    </div>
    ...
</header>
<main>
    <router-outlet></router-outlet>
    <admin>
        ...
        <div class="menu" id="admin-menu" [ngClass]="{'active': activeClass}">
            <div class="contflex">
              <div class="h1">Menu</div>
              <ul>
                <li class="active">List 1</li>
                <li>List 2</li>
                <li>List 3</li>
              </ul>
            </div>
          </div>
        ...
    </admin>
</main>

我是柱塞工程

我是柱塞产生全貌

Answer 1

首先在header.component.html中替换以下一行：(click)="admMenuShow();"

使用(click)="admMenuShow()"，您不需要分号！

其次，我没有看到头组件中有类active (您在[ngClass]="{'active': activeClass}"中调用了css类active )。您可以通过在标头的组件元数据中添加styles=['active: ...']来添加它。

正如我所理解的，您有一个标头组件和一个用户组件，当您单击header组件中的一个按钮时，您希望将一个类应用到user组件中的一个元素中。

您可以在用户组件中使用@Input装饰符，然后按照如下方式使用绑定( <admin [ButtonSelected]="activeClass"></admin>是显示<admin></admin>的任何组件的布尔属性，在这种情况下，它是标头组件)

要使其工作，不要忘记在用户组件中从Input导入@angular/core，并在声明ButtonSelected布尔属性时使用装饰符：@Input() ButtonSelected: boolean = false而不是ButtonSelected: boolean = false；通过这种方式，您将指示属性ButtonSelected将通过显示“父”组件的“父”组件传递给用户组件。

这是一个工作的柱塞 (柱塞我没有抓，不是你的)

编辑：

我修改了你的柱塞使它工作，在这里。注意:在全视图模式下查看效果。