Question

为了尝试下面的示例，对角材料响应侧面进行了演示

https://medium.com/@lopesgon/angular-material-a-responsive-sidenav-ef1d06b37986

我使用完全包含的代码创建了一个组件，但是什么也没有出现。我该如何解决这个问题？

我已经搜索了一些解决方案并解决了版本问题（在html文件中，不是更多的“ md”而是“ mat”。仅解决了浏览器控制台中的错误，但什么也没有出现。

查看：

<md-sidenav-container>
  <md-sidenav #sidenav [opened]="screenWidth > 840" [mode]="(screenWidth > 840) ? 'side' : 'over'">
    <div class="sidenav-header">
      <a routerLink="/"><h5>Hello world!</h5></a>
    </div>
  </md-sidenav>

  <div [ngStyle]="{'display' : (screenWidth > 840) ? 'none' : 'block'}">
    <button type="button" md-button (click)="sidenav.open()">
      Toggle sidenav when display is block
    </button>
  </div>

  <router-outlet></router-outlet>

</md-sidenav-container>

组件：

screenWidth: number;

constructor() {
  // set screenWidth on page load
  this.screenWidth = window.innerWidth;
  window.onresize = () => {
    // set screenWidth on screen size change
    this.screenWidth = window.innerWidth;
  };
}

Answer 1

我已经实现了类似的代码。我面临的问题之一是，当您在其他地方（另一个地方）添加在构造函数中编写的相同代码时，没有任何效果。如果您仅在一个地方使用它，它将起作用并确保已导入所有必需的东西

Angular Material中的响应式sidenav，什么都没有出现

1 个答案: