Как переключить компонент sidenav из компонента заголовка с помощью кнопки - PullRequest
Новая
       18

Как переключить компонент sidenav из компонента заголовка с помощью кнопки

0 голосов
/ 11 марта 2020

Здравствуйте, я использую angular 8 и хочу включить компонент sidenav в мобильном представлении. Таким образом, для мобильного медиа-запроса я использую этот CSS, чтобы скрыть sidenav 

@media screen and (max-width: 600px)
.sidenav {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
}

Так что в мобильном представлении у меня есть значок гамбургера на компоненте заголовка. Итак, при нажатии, как я могу переключить компонент sidenav?

Заголовок HTML: - 

<div class="header">
  <fa-icon class="hamburger" [icon]="faBars"></fa-icon>

 <div class="logo-section">
  <img class="logo" [routerLink]="['/dashboard']" src="../../../assets/images/abc.png"/>
 </div>
</div>

Компонент заголовка: - 

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  searchText: string;

  faBars = faBars;

  constructor(private route: Router) { }

  ngOnInit() {
  }
}

Sidennav HTML: - 

<div class="sidenav">
    <div class="logo">
        <!-- 
        <img src="../../../assets/images/logo.png" alt="SKS" /> -->
    </div>
    <div class="sidenavbar">

        <div class="menu" appMenuactive [routerLink]="['/dashboard']" [routerLinkActive]="['selected']">
            <p class="menuicons">
                <fa-icon [icon]="faTh"></fa-icon>
            </p><span>
                Dashboard
            </span>
        </div>

        <div class="menu" appMenuactive [routerLink]="['/data']" [routerLinkActive]="['dataselect']">
            <p class="menuicons">
                <fa-icon [icon]="faTachometerAlt"></fa-icon>
            </p><span>
                Info
            </span>
        </div>

        <div class="menu" appMenuactive [routerLink]="['/storage']" [routerLinkActive]="['dataselect']">
            <p class="menuicons">
                <fa-icon [icon]="faStar"></fa-icon>
            </p><span>
                Storage
            </span>
        </div>

    </div>
</div>

Компонент Sidenav: - 

@Component({
  selector: 'app-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.scss']
})
export class SidenavComponent implements OnInit {

  faTachometerAlt = faTachometerAlt;
  faTh = faTh;
  faStar = faStar;
  constructor() { }
  activatemenu = false;
  ngOnInit() {
  }
}

Как сделать навигационную панель видимой при нажатии заголовка fa-icon в мобильный вид?

1 Ответ

1 голос
/ 11 марта 2020

Я опубликую это как ответ, но обычно у вас есть все, что вам нужно на по этой ссылке (Спасибо @Roman Šimík).

Создайте такой сервис, как: 

export class HeaderService {

  isDisplayed = false;
  private showSideNavSubject = new Subject<boolean>();

  constructor() {}

  toggle(): void {
    this.isDisplayed = !this.isDisplayed;
    this.showSideNavSubject.next(this.isDisplayed);
  }

  get(): Observable<boolean> {
    return this.showSideNavSubject.asObservable();
  }
}

Заголовок 

<fa-icon class="hamburger" [icon]="faBars" (click)="toggle()"></fa-icon>

constructor(private headerService: HeaderService) {}

toggle() {
  this.headerService.toggle();
}

Sidenav 

<p>Show sidenav : {{ showSideNav }}</p>

showSideNav = false;
subscription: Subscription;

constructor(private headerService: HeaderService) {}

ngOnInit() {
  this.subscription = this.headerService.get().subscribe(sideNav => this.showSideNav = sideNav);
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

Я реализую его на Stackblitz, но без роутер. Работает. Это то, что вам нужно?

...