0

我正在尝试将 Material Sidenav 插入到我的组件中。出于某种原因，当我尝试插入基本 sidenav 时，它不显示任何内容——主要内容、触发 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();
  }

编辑：得到答案，我没有安装角度材质动画库。留下这个以防其他人有同样的问题。

4

1 回答 1

0

尝试使用 sidenav.toggle() 而不是 sidenav.open()

问候

于 2018-04-09T17:34:31.097 回答