Question

我正在尝试将Material Sidenav插入到我的组件中。出于某种原因，当我尝试插入一个基本的sidenav时，它没有显示任何内容 - 主要内容，触发sidenav的按钮，也没有侧面内容。我导入了{MatSidenavModule}和{MatButtonModule}。但是，如果我注释掉代码的mat-sidenav部分，那么按钮就会出现，所以我认为这可能是我设置mat-sidenav的方式的问题。

这是我的HTML代码：

＆＃13;

<!--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>

＆＃13;

这是相应的product.component.ts文件:(我拿出了一些我在HTML中注释掉的函数）

＆＃13;

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();
  }

＆＃13;

编辑：得到了答案，我没有安装角度材质动画库。如果其他人遇到同样的问题就离开了。

Answer 1

尝试使用sidenav.toggle（）代替sidenav.open（）

此致

Angular 4 SideNav不显示

1 个答案: