如何使用按钮从 header 组件切换 sidenav 组件

Question

您好，我正在使用 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;
}

所以在移动视图中，我在 header 组件上有一个汉堡包图标。那么点击如何切换 sidenav 组件？

Header 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>

Header分量：-

@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() {
  }
}

西德纳夫 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>

侧导航组件：-

@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() {
  }
}

如何在移动视图中单击 header fa-icon 时显示导航栏？

Answer 1

我会 post 它作为答案，但通常情况下，您在 this link 上拥有您需要的一切（感谢@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();
}

西德纳夫

<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 上实现了它，但没有路由器。它的工作。这是你需要的吗？

如何使用按钮从 header 组件切换 sidenav 组件

How to toggle sidenav component from header component using a button

css

angular

sidenav