Css 如何使用按钮从标题组件切换sidenav组件

您好，我正在使用angular 8，我想在mobile view上切换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() {
  }
}

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

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

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

---

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

我会把它作为一个答案发布，但通常情况下，你都有你需要的（谢谢@RomanŠimík）

提供如下服务：

导出类HeaderService{
isDisplayed=false；
private showSideNavSubject=新主题（）；
构造函数（）{}
toggle（）：void{
this.isDisplayed=！this.isDisplayed；
this.showSideNavSubject.next（this.isDisplayed）；
}
get（）：可观察{
返回此.showSideNavSubject.asObservable（）；
}
}

标题

构造函数（私有headerService:headerService）{
切换（）{
this.headerService.toggle（）；
}

Sidenav

showSideNav:{{showSideNav}

showSideNav=false；
认购：认购；
构造函数（私有headerService:headerService）{}
恩戈尼尼特（）{
this.subscription=this.headerService.get（）.subscripte（sideNav=>this.showSideNav=sideNav）；
}
恩贡德斯特罗（）{
this.subscription.unsubscripte（）；
}

我在Stackblitz上实现它，但没有路由器。它起作用了。

---

这就是您需要的吗？

您需要将信息从组件发送到另一个组件。为此，您应该使用Observable和Subject->@RomanŠimík在这种情况下需要发送什么样的信息？@NoobCoder您不希望

位于

header.component.html

中吗？@Emilien如果sidenav和header位于同一个组件中，则没有问题。但是我对sidenav和header有不同的组件。@NoobCoder然后就像Roman说的，您只需要实现一个存储值的服务。您可以使用主题，这很简单。@NoobCoder这里是。我已经做了一些修改，但是你可以继续了。好吧，但是我不知道你是如何将布尔值与html链接起来的。在我的例子中，如何使用布尔值进行隐藏/显示？正如你所见，我的导航栏分区@NoobCoder你是说这个

Show sidenav:{{showSideNav}}

是的，我将如何使用Show和hide为整个

sidenav

div定义真值和假值。我不理解您的问题。。。在代码中，您在哪里调用sidenav组件？