Angular Material Sidenav будет отображать только первый элемент в списке навигации

#javascript #html #angular #angular-material

#javascript #HTML #angular #angular-material

Вопрос:

У меня есть компонент angular material sidenav с mat-nav-list в нем, но он будет отображать только первый элемент в mat-nav-list. Я также протестировал mat-nav-list в другом контексте, и он работает так, как ожидалось. Я делаю что-то не так здесь или это какая-то ошибка в angular material.

 navbar.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {

  @Input() name:string;

  constructor() { }

  ngOnInit(): void {
  }

}

 navbar.html

<mat-sidenav-container>
  <mat-sidenav #sidenav>
    <mat-nav-list>
      <mat-list-item [routerLink]="'/'"> App </mat-list-item>
      <mat-list-item><button mat-button (click)="sidenav.toggle()">Toggle</button></mat-list-item>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button mat-button aria-label="Example icon-button with menu icon"
        (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
      <span>{{ name }}</span>
    </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>

 home.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [
    './app.component.scss'
  ]
})
export class AppComponent {
  title = 'HealthyLivingClient';
}

 home.html

<app-navbar [name] = "name"></app-navbar>

Если я переключу положение элементов mat-list в mat-nav-list, я все равно получу только первый элемент в списке, на этот раз вместо кнопки переключения.

1. Вам необходимо следовать официальной документации. для этого есть несколько примеров

2. Я начал с примера из документации и построил на нем. В документации приведены примеры, которые необходимо расширить, и мой вопрос заключается в том, почему добавление простого списка навигации в sidenav позволит добавить в список только один элемент или что-то конкретное в моем коде неверно.

3. Можете ли вы добавить свой код в stackblitz?

Ответ №1:

Это связано с тем, что контейнер sidenav фактически не заполняет окно вашего браузера по умолчанию. Для этого вы должны использовать fullscreen атрибут, который предоставляет стили CSS, соответствующие ширине и высоте окна:

 <mat-sidenav-container fullscreen>
  <!-- Contents of sidenav container go here -->
</mat-sidenav-container>

Однако, похоже, что fullscreen атрибут только для CSS все еще не задокументирован.