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

Question

I am having a side navigation panel with some details.我有一个带有一些细节的侧面导航面板。 In the header component I am having a button which should toggle the side navigation.在标题组件中，我有一个按钮可以切换侧面导航。 I have implemented a toolbar using .My requirement is that when i click on that button, the side navigation should toggle in and out.我已经使用实现了一个工具栏。我的要求是当我点击那个按钮时，侧边导航应该切换进出。 How to implement it ?如何实施？

My navigation.component.html:我的 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>

header.component.html头文件.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 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

change your togglelSSideNav() function and use ngIf to check open status更改您的 togglelSSideNav() 函数并使用 ngIf 检查打开状态

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

Answer 2

Edit: this is answering the question based on a complex component hierarchy.编辑：这是根据复杂的组件层次结构回答问题。 I didn't realise your header and sidebar components were both in app component.我没有意识到您的标题和侧边栏组件都在应用程序组件中。 In which case it's a trivial solution.在这种情况下，这是一个微不足道的解决方案。

The two common ways of doing this are执行此操作的两种常见方法是

bubble events from event source to interested components.从事件源到感兴趣的组件的冒泡事件。 In your case this would mean bubbling through the common path between header component and sidebar component.在您的情况下，这意味着冒泡通过标题组件和侧边栏组件之间的公共路径。

By this, I mean you have a series of child -> parent event handling relationships like this:通过这个，我的意思是你有一系列的 child -> parent 事件处理关系，如下所示：

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

Where event is some event emitter emitting events of T : @Output() event: EventEmitter<T> = new EventEmitter<T>();其中 event 是一些事件发射器发出T事件： @Output() event: EventEmitter<T> = new EventEmitter<T>();

And then when you have bubbled up to the common ancestor, you have a series of parent -> child relationships like this:然后当你冒泡到共同祖先时，你有一系列父 - > 子关系，如下所示：

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

Where eventResult is some property of type T and childEventResult is some input property of type T : @Input() eventResult: T;其中eventResult是类型的某些属性T和childEventResult被类型的一些输入属性T ： @Input() eventResult: T; . .

This is a tedious approach if you have a complex component hierarchy, or want to change the hierarchy.如果您有一个复杂的组件层次结构，或者想要更改层次结构，这是一种乏味的方法。

Pass the data between a common service.在公共服务之间传递数据。

Inject the common service into both components.将公共服务注入到两个组件中。 Set up a subject on the service.在服务上设置一个主题。 The interested component (sidebar) would subscribe to the subject, and the event source component (header) would send new values to the subject when an event happens.感兴趣的组件（侧边栏）将订阅主题，事件源组件（标题）将在事件发生时向主题发送新值。

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();
  }
}

This approach is better if you have a complex component structure, but I feel a bit unsure about leaking pure UI concerns into my services.如果您有一个复杂的组件结构，这种方法会更好，但我觉得有点不确定将纯 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