Angular компонент не отображается через селектор (боковая навигация)

Question

Я запуталась. У меня есть этот код внутри моего app.component.html файла:

<mat-sidenav-container class="sidenav-container">
  <app-sidenav></app-sidenav>
  <mat-sidenav-content>
    <app-header></app-header>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
  </mat-sidenav-content>
</mat-sidenav-container>

Таким образом, моя боковая навигация не видна, но когда я помещаю боковую навигацию прямо в файл, она видна и внутри DOM:

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #sidenav id="mobile-menu-nav" class="sidenav" fixedInViewport="true" mode="over" position="end">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <app-header></app-header>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
  </mat-sidenav-content>
</mat-sidenav-container>

Я дважды проверил все, и мой <app-sidenav></app-sidenav> существует:

import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {MatSidenav} from '@angular/material';
import {SidenavService} from '../services/sidenav-service.service';

@Component({
  selector: 'app-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.css']
})
export class SidenavComponent implements OnInit, AfterViewInit {

  @ViewChild('sidenav') public sidenav: MatSidenav;

  constructor(private sidenavService: SidenavService) {
  }

  ngOnInit() {
  }

  ngAfterViewInit(): void {
    this.sidenavService.setSidenav(this.sidenav);
  }
}

А также компонент включен в мой app.module.ts ... Что мне здесь не хватает?

Answer 1

Думаю, ваша проблема в том, что в <app-sidenav> вы включаете <mat-sidenav>. Попробуйте оставить в компоненте только содержимое и вернуть тег <mat-sidenav> в <mat-sidenav-container>. Примерно так,

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #sidenav id="mobile-menu-nav" class="sidenav" fixedInViewport="true" mode="over" position="end">
    <app-sidenav></app-sidenav>
  </mat-sidenav>
  <mat-sidenav-content>
    <app-header></app-header>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
  </mat-sidenav-content>
</mat-sidenav-container>