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

Question

在 app.component.html 中，我有一个顶部菜单栏，其中包含 3 个链接 命名为 Home、About 和 contactus。 如果我单击主页链接，那么我应该显示主页的左侧菜单栏（Home.component.html） 如果我点击关于链接，那么我应该显示关于页面的左侧菜单栏（About.component.html） 所以我的问题是“如何访问主页，关于页面 div 即左菜单栏从我的主页（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>

Home.component.html

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

关于page.component.html

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

Answer 1

在服务 myservice.service.ts 中创建Subject，如下所示：

在您的 myservice.service.ts 中

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

在您的 app.component.ts 中，在构造函数中导入 myservice 然后创建一个标志，如下所示：

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

当用户点击图片时

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

在你的 home.component.ts 和 about.component.ts 中，你应该使用 ngOnInit 中的 subscribe 方法来监听 Subject

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

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

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