Html 如何从Angular 6中的父页面路由器链接访问子页面组件

在app.component.html中，我有一个包含3个链接的顶部菜单栏 名为Home，关于和contactus。 如果我点击一个主页链接，那么我应该显示主页的左菜单栏（home.component.html） 如果我点击about链接，那么我应该显示about页面的左菜单栏（about.component.html） 所以我的问题是“如何访问主页，关于页面分区，即从我的主页（app.component）点击左菜单栏图像按钮”

app.component.html

<nav class="navbar navbar-dark bg-dark mb-5">
  <img src="src/assets/images/ham1.png" (click)="ShowLeftMenubar();">
 <div class="navbar-nav">
   <a class="nav-item nav-link" routerLink="homepage">Home</a>
<a class="nav-item nav-link active" routerLink="aboutpage">ABOUT</a>
 <a class="nav-item nav-link active" routerLink="contactpage">CONTACTUS</a>
</div>
</nav>
<router-outlet></router-outlet>

<div id="leftmenubar"  class="leftmenuclass">
  <a routerLink="showcontent">sample1 </a>
  <a routerLink="showcontent">sample2 </a>
  <a routerLink="showcontent">sample3 </a>
</div>

<div id="leftmenubar"  class="leftmenuclass">
  <a routerLink="showcontent">sample3 </a>
  <a routerLink="showcontent">sample4 </a>
  <a routerLink="showcontent">sample5 </a>
</div>

<div *ngIf="isShowSidebar" id="leftmenubar"  class="leftmenuclass">
  <a routerLink="showcontent">sample1 </a>
  <a routerLink="showcontent">sample2 </a>
  <a routerLink="showcontent">sample3 </a>
</div>

家
关于
联系人

Home.component.html

<nav class="navbar navbar-dark bg-dark mb-5">
  <img src="src/assets/images/ham1.png" (click)="ShowLeftMenubar();">
 <div class="navbar-nav">
   <a class="nav-item nav-link" routerLink="homepage">Home</a>
<a class="nav-item nav-link active" routerLink="aboutpage">ABOUT</a>
 <a class="nav-item nav-link active" routerLink="contactpage">CONTACTUS</a>
</div>
</nav>
<router-outlet></router-outlet>

<div id="leftmenubar"  class="leftmenuclass">
  <a routerLink="showcontent">sample1 </a>
  <a routerLink="showcontent">sample2 </a>
  <a routerLink="showcontent">sample3 </a>
</div>

<div id="leftmenubar"  class="leftmenuclass">
  <a routerLink="showcontent">sample3 </a>
  <a routerLink="showcontent">sample4 </a>
  <a routerLink="showcontent">sample5 </a>
</div>

<div *ngIf="isShowSidebar" id="leftmenubar"  class="leftmenuclass">
  <a routerLink="showcontent">sample1 </a>
  <a routerLink="showcontent">sample2 </a>
  <a routerLink="showcontent">sample3 </a>
</div>

样本1
样本2
样本3

aboutpage.component.html

<nav class="navbar navbar-dark bg-dark mb-5">
  <img src="src/assets/images/ham1.png" (click)="ShowLeftMenubar();">
 <div class="navbar-nav">
   <a class="nav-item nav-link" routerLink="homepage">Home</a>
<a class="nav-item nav-link active" routerLink="aboutpage">ABOUT</a>
 <a class="nav-item nav-link active" routerLink="contactpage">CONTACTUS</a>
</div>
</nav>
<router-outlet></router-outlet>

<div id="leftmenubar"  class="leftmenuclass">
  <a routerLink="showcontent">sample1 </a>
  <a routerLink="showcontent">sample2 </a>
  <a routerLink="showcontent">sample3 </a>
</div>

<div id="leftmenubar"  class="leftmenuclass">
  <a routerLink="showcontent">sample3 </a>
  <a routerLink="showcontent">sample4 </a>
  <a routerLink="showcontent">sample5 </a>
</div>

<div *ngIf="isShowSidebar" id="leftmenubar"  class="leftmenuclass">
  <a routerLink="showcontent">sample1 </a>
  <a routerLink="showcontent">sample2 </a>
  <a routerLink="showcontent">sample3 </a>
</div>

样本3
样本4
样本5

在服务myservice.service.ts中创建一个

主题，如下所示：

public isShowMenu = true;
constructor(private myservice: MyService){}

在您的myservice.service.ts中

public sidebar$ = new Subject<boolean>();

当用户单击图像时

ShowLeftMenubar() {
  this.isShowMenu = !this.isShowMenu;
  this.myservice.sidebar$.next(this.isShowMenu);
}

在home.component.ts和about.component.ts中，应该使用ngOnInit中的subscribe方法来侦听主题

public isShowSidebar = false;
constructor(private myservice: MyService){}
ngOnInit() {
  this.myservice.sidebar$.subscribe((value) => this.isShowSidebar = value);
}

在home.component.html和about.component.html中

<nav class="navbar navbar-dark bg-dark mb-5">
  <img src="src/assets/images/ham1.png" (click)="ShowLeftMenubar();">
 <div class="navbar-nav">
   <a class="nav-item nav-link" routerLink="homepage">Home</a>
<a class="nav-item nav-link active" routerLink="aboutpage">ABOUT</a>
 <a class="nav-item nav-link active" routerLink="contactpage">CONTACTUS</a>
</div>
</nav>
<router-outlet></router-outlet>

<div id="leftmenubar"  class="leftmenuclass">
  <a routerLink="showcontent">sample1 </a>
  <a routerLink="showcontent">sample2 </a>
  <a routerLink="showcontent">sample3 </a>
</div>

<div id="leftmenubar"  class="leftmenuclass">
  <a routerLink="showcontent">sample3 </a>
  <a routerLink="showcontent">sample4 </a>
  <a routerLink="showcontent">sample5 </a>
</div>

<div *ngIf="isShowSidebar" id="leftmenubar"  class="leftmenuclass">
  <a routerLink="showcontent">sample1 </a>
  <a routerLink="showcontent">sample2 </a>
  <a routerLink="showcontent">sample3 </a>
</div>


样本1
样本2
样本3
什么不起作用，如果你将它发送到主页，那么它在这里就不会有问题。你是否面临任何问题请添加路由配置路由工作正常。当我在我的app.component中单击图像按钮时，div（左菜单栏）在主页中应该隐藏。类似地，如果我单击app.component中的图像按钮，那么它应该在主页上显示leftmenubar（div）。我希望通过创建带有主题的服务来解决您的问题。检查我的answee.WOW。回答很好，我很高兴Nithi，它可以工作，谢谢。我是否可以访问子组件div id（即leftmenubar）并从父组件（即app.component）中类leftmenuclass