Угловое 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 decorator в компоненте пользователя а затем использовать привязку следующим образом: <admin [ButtonSelected]="activeClass"></admin> (activeClass - это булево свойство любого компонента вы отображая <admin></admin> в, в этом случае вашего компонент заголовка)

Для того, чтобы работать, не забудьте импортировать Input из @angular/core в компоненте пользователей и использовать декоратор при объявлении ButtonSelected булева свойства, оно будет be: @Input() ButtonSelected: boolean = false вместо ButtonSelected: boolean = false; таким образом, вы укажете на угловое значение, которое свойство ButtonSelected будет передано компоненту пользователя компонентом «parent», отображающим его.

Вот рабочий plunker (plunker я не царапать, а не ваша)

Редакцией:

Я изменил ваш plunker, чтобы заставить его работать, вот оно. Примечание: просмотр в режиме полного просмотра, чтобы увидеть эффект.