时间戳

首页 > 解决方案 > 通过选择器（sidenav）不可见角度组件

angular - 通过选择器（sidenav）不可见角度组件

问题描述

我很困惑。我的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>

这样我的 sidenav 是不可见的，但是当我将 sidenav 直接放入文件时，它在 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......我在这里错过了什么？

标签： angulartypescript

解决方案

我认为你的问题是在<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>

推荐阅读