Angular 4 SideNav не отображается

Я пытаюсь вставить в свой компонент Material Sidenav. По какой-то причине, когда я пытаюсь вставить базовую навигацию по сайту, она ничего не показывает - основной контент, кнопка для запуска боковой навигации или побочный контент. Я импортировал как {MatSidenavModule}, так и {MatButtonModule}. Однако, если я закомментирую часть кода mat-sidenav, тогда появится кнопка, поэтому я думаю, что это может быть проблема с тем, как я настраиваю mat-sidenav.

Вот мой HTML-код:

<!--product.component.html-->

<h2>Store Inventory</h2>
<div class = "products">
  Remaining: {{displayRemain}}
  Requested: {{displayRequest}}
  {{title}}
  Total: {{cartTotal}}
</div>
<div>
  <mat-sidenav-container class="example-container">
    <mat-sidenav #sidenav class="example-sidenav">
      Sidenav opened!
    </mat-sidenav>
    <div class="example-sidenav-content">
      <button type="button" mat-button (click)="sidenav.open()">
        Open sidenav
      </button>
    </div>
  </mat-sidenav-container>
</div>

Вот соответствующий файл product.component.ts: (Я удалил некоторые функции, которые закомментировал в HTML)

import { Component, OnInit } from '@angular/core';
import { Product } from '../product';
import { ProductService } from '../product.service';
import {element} from 'protractor';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  products: Product[];
  displayRemain: number;
  displayRequest: number;
  title: string;
  prevRemain: number;
  cartTotal: number;
  constructor(private productService: ProductService) {
  }

  ngOnInit() {
    this.title = 'Not Hello';
    this.displayRemain = 0;
    this.displayRequest = 0;
    this.prevRemain = 10;
    this.cartTotal = 0;
    this.getProducts();
  }

РЕДАКТИРОВАТЬ: получил ответ, я не устанавливал библиотеку анимации углового материала. Оставить это на случай, если у других возникнет такая же проблема.


angular html angular-material sidenav
person Community    schedule 09.04.2018    source источник
comment
Вы уверены, что импортировали нужный модуль? Это должно быть MatSidenavModule, не MatSideNavModule.   -  person Edric    schedule 09.04.2018
comment
Да, я импортировал MatSideNavModule. Приносим извинения за ошибку с заглавными буквами.   -  person    schedule 09.04.2018

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте использовать sidenav.toggle () вместо sidenav.open ()

С Уважением

person Xavier Castillo    schedule 09.04.2018