Angular 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> 

这是plunker project

这是plunker result in full view

Answer 1

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

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

其次，我没有看到，你有你的头组件的类active（你叫CSS类活跃在[ngClass]="{'active': activeClass}"。你可以通过头部的组件元数据添加styles=['active: ...']添加它。

我的理解，你有一个标题组件和一个用户组件，当你点击标题组件中的一个按钮时，你想要将一个类应用到用户组件中的一个元素上。

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

对于它的工作，不要忘记在声明ButtonSelected布尔属性从@angular/core在用户组件导入Input和使用装饰，它会是：@Input() ButtonSelected: boolean = false而不是ButtonSelected: boolean = false;通过这种方式，您将指示角色ButtonSelected属性将由显示它的“父”组件显示给用户组件。

这里是一个工作plunker（plunker我没刮，不是你）

编辑：

我修改了plunker，使其工作，在这儿呢。注意：在全视图模式下查看效果。