通过选择器(侧导航)看不到角度组件

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>