0

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

如何在移动视图中单击标题图标时使导航栏可见？

4

1 回答 1

1

我会将其作为答案发布，但通常情况下，您在此链接上拥有所需的一切（感谢@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 上实现它，但没有路由器。它正在工作。这是你需要的吗？

于 2020-03-11T09:22:19.697 回答