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，使其工作，在這兒呢。注意：在全視圖模式下查看效果。