尝试使用切换按钮实现侧面导航<mat-toolbar> ?

Question

我有一个带有一些细节的侧面导航面板。 在标题组件中，我有一个按钮可以切换侧面导航。 我已经使用实现了一个工具栏。我的要求是当我点击那个按钮时，侧边导航应该切换进出。 如何实施？

我的 navigation.component.html：

<mat-toolbar>
      </mat-toolbar>
<mat-sidenav-container>

    <mat-list>
    <mat-list-item>Accounts</mat-list-item>
    <mat-list-item>UserProfile</mat-list-item>
    <mat-list-item>Contact me</mat-list-item>
    <mat-list-item>Gspeed</mat-list-item>


  </mat-list>

 </mat-sidenav-container>

头文件.component.html

<body [ngClass]="selectedStyle" ><div >

    <select [(ngModel)]="selectedStyle" >
       <option *ngFor="let s of styles" [ngValue]="s">{{s}}</option>
    </select>
    <button mat-icon-button (click)="toggleSidenav()">
      <mat-icon >Details</mat-icon></button>

    </div>
   </body>

app.component.ts

import { Component, OnInit,Output,EventEmitter } from '@angular/core';


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


  styles: string[] = [];
  selectedStyle: string;
  open: false;
   toggleSidenav(){
     open: !this.open;
   }


  constructor() { 

  }

  ngOnInit(){

    this.styles = ['red','green','blue','none'];
    }

}

Answer 1

更改您的 togglelSSideNav() 函数并使用 ngIf 检查打开状态

     toggleSidenav(){
     this.open=!this.open;
   }

Answer 2

编辑：这是根据复杂的组件层次结构回答问题。 我没有意识到您的标题和侧边栏组件都在应用程序组件中。 在这种情况下，这是一个微不足道的解决方案。

执行此操作的两种常见方法是

从事件源到感兴趣的组件的冒泡事件。 在您的情况下，这意味着冒泡通过标题组件和侧边栏组件之间的公共路径。

通过这个，我的意思是你有一系列的 child -> parent 事件处理关系，如下所示：

<child (event)="handleEvent($event)">
</child>

其中 event 是一些事件发射器发出T事件： @Output() event: EventEmitter<T> = new EventEmitter<T>();

然后当你冒泡到共同祖先时，你有一系列父 - > 子关系，如下所示：

<child [childEventResult]="eventResult">
</child>

其中eventResult是类型的某些属性T和childEventResult被类型的一些输入属性T ： @Input() eventResult: T; .

如果您有一个复杂的组件层次结构，或者想要更改层次结构，这是一种乏味的方法。

在公共服务之间传递数据。

将公共服务注入到两个组件中。 在服务上设置一个主题。 感兴趣的组件（侧边栏）将订阅主题，事件源组件（标题）将在事件发生时向主题发送新值。

export class MyService {
  private sidebarChange$: Subject<boolean> = new Subject<boolean>();

  // header updates the subject via this method
  updateSidebar(visible: boolean): void {
    this.sidebarChange$.next(visible);
  }

  // Sidebar subscribes to this. Needs a more suitable name
  sidebarChange(): Observable<boolean> {
    return this.sidebarChange$.asObservable();
  }
}

如果您有一个复杂的组件结构，这种方法会更好，但我觉得有点不确定将纯 UI 问题泄漏到我的服务中。

尝试使用切换按钮实现侧面导航<mat-toolbar> ?

问题描述

2 个解决方案

解决方案1
0 2020-02-17 08:05:54

解决方案2
0 2020-02-17 08:12:05

尝试使用切换按钮实现侧面导航<mat-toolbar> ?

问题描述

2 个解决方案

解决方案1 0 2020-02-17 08:05:54

解决方案2 0 2020-02-17 08:12:05

解决方案1
0 2020-02-17 08:05:54

解决方案2
0 2020-02-17 08:12:05