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>

这是plunker project

这是plunker result in full view

Answer 1

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

与 (click)="admMenuShow()"，你不需要分号！

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

据我所知，您有一个标题组件和一个用户组件，当您单击标题组件中的按钮时，您希望将类应用于用户组件中的元素。

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

要使其正常工作，请不要忘记在用户组件中从Input导入@angular/core并在声明ButtonSelected布尔属性时使用装饰器，它将是：{{1而不是@Input() ButtonSelected: boolean = false;通过这种方式，您将向角度指示属性ButtonSelected: boolean = false将由＆＃34; parent＆＃34;提供给用户组件。显示它的组件。

这是一个有效的plunker（我没有划伤，不是你的），

已编辑：

我修改了您的plunker以使其正常工作，就在这里。注意：在全视图模式下查看效果。

单击Angular 2打开菜单

1 个答案: