Question

在那里，我试图显示一个带有角度2的侧边，链接被列为行，我已经半天试图让它工作，这就是它的样子：

这是我的代码：

<md-sidenav-container class="sidenav-fab-container" fullscreen>
<md-toolbar>
  <button (click)="sidenav.toggle()">
    <md-icon>add</md-icon>
  </button>
</md-toolbar>

<md-sidenav #sidenav mode="over" opened="false">
  <div>
  <md-list>
    <!--<h3>links:</h3>-->
    <md-list-item>
      <button (click)="sidenav.toggle()">
        <md-icon>add</md-icon>
      </button>
    </md-list-item>
    <md-list-item>
      <md-icon md-list-icon>folder</md-icon>
      <a md-line>hello World</a>
    </md-list-item>
    <md-list-item>
      <md-icon md-list-icon>folder</md-icon>
      <a>hello World</a>
    </md-list-item >
    <md-divider></md-divider>
    <md-list-item>
      <md-icon md-list-icon>folder</md-icon>
      <a>hello World</a>
    </md-list-item>
  </md-list>
  </div>
</md-sidenav>

<main-view-template></main-view-template>

sidenav.ts

import {Component, ViewEncapsulation} from '@angular/core';
import 'hammerjs';

@Component({
  moduleId : module.id,
  selector: 'side-nav-component',
  templateUrl: 'sideNav.component.html',
  encapsulation: ViewEncapsulation.None,
})

export class sideNavComponent{
}

任何帮助将不胜感激。不能为我的生活弄清楚。

Answer 1

最终解决了它。将项目类型更改为跨度并正确显示：

<md-list-item>
    <button md-button>
      <md-icon>add</md-icon>
      <span>this is text</span>
    </button>
  </md-list-item>
  <br>
  <md-list-item class="side-nav-container">
    <button md-button>
      <md-icon>add</md-icon>
      <span>this is text</span>
    </button>
  </md-list-item>
  <br>
  <md-list-item>
    <button md-button>
      <md-icon>add</md-icon>
      <span>this is text</span>
    </button>

现在显示如下

http://imgur.com/a/lOxEp

感谢您的帮助！

角度2 sidenav项目不显示为行

1 个答案: