Навигация показать / скрыть не работает Angular 6 - PullRequest
Новая
       10

Навигация показать / скрыть не работает Angular 6

0 голосов
/ 04 октября 2018

Я просто пытаюсь скрыть меню в компоненте входа, видимое свойство устанавливается в конструкторе службы, но не работает после этого.

Значение, установленное конструктором, работает нормально, но вызывает функцию hide(), работающую нормальнов отладке, но установите hiddin / visible на панели навигации.

navigation.service.ts 

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

@Injectable({
  providedIn: 'root'
})
export class NavigationService {
  visible: boolean;

  constructor() { 
    this.visible = true; //It's working either set true or fasle 
  }

  hide() { 
    this.visible = false; //Function working fine but Not reflecting in UI
  }

}

navigation.component.html 

<!--Main Navigation-->
<header *ngIf="nav.visible">
</header>

login.componet.ts 

    import { Component, OnInit} from '@angular/core';
    import { NavigationService } from '../../navigation.service';
    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.scss'],
    })
    export class LoginComponent implements OnInit {
      constructor(public nav: NavigationService) {
            this.nav.hide();
     }
      ngOnInit() {

      }
    }

navigation.component.ts 

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NavigationService } from '../../navigation.service';
@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss'],
  providers: [NavigationService]
})
export class NavigationComponent implements OnInit {
  @ViewChild('sidenav') sidenav: ElementRef;
  clicked: boolean;
  constructor(public nav: NavigationService) {
    this.clicked = this.clicked === undefined ? false : true;
  }

  ngOnInit() {
  }

  setClicked(val: boolean): void {
    this.clicked = val;
  }
}

1 Ответ

0 голосов
/ 04 октября 2018

Удаление провайдеров из компонента навигации должно работать 

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent implements OnInit {
  @ViewChild('sidenav') sidenav: ElementRef;
  clicked: boolean;
  constructor(public nav: NavigationService) {
    this.clicked = this.clicked === undefined ? false : true;
  }

  ngOnInit() {
  }

  setClicked(val: boolean): void {
    this.clicked = val;
  }
}

пожалуйста, проверьте stackblitz https://stackblitz.com/edit/angular-o9jya9?file=src%2Fapp%2Fnavigation.service.ts

...