AngularJS Material Tab高度问题答案

【问题标题】：AngularJS Material Tab height issueAngularJS Material Tab高度问题
【发布时间】：2017-01-31 14:50:53
【问题描述】：

我在用 AngularJS Material 解决问题时遇到了一些麻烦，我想知道是否有人知道为什么会出现以下代码：

<md-tabs layout-fill >

    <md-tab id="tab1">
        <md-tab-label>Item One</md-tab-label>
        <md-tab-body>

            <md-list>
                <md-subheader class="md-no-sticky">3 line item</md-subheader>
                <md-list-item class="md-3-line" ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,50]">

                    <div class="md-list-item-text">
                        <h3>sdfs</h3>
                        <h4>sdfsd</h4>
                        <p>sdfsdf</p>
                    </div>
                </md-list-item>

            </md-list>
        </md-tab-body>
    </md-tab>

</md-tabs>

在 Firefox 上生成 this。

和this 在 chrome 上。

很抱歉没有直接发布图片我没有足够的声誉。

【问题讨论】：

这可能仍然没有解决方案......

标签： angular-material

【解决方案1】：

我也有类似的问题。虽然md-dynamic-height 解决了它...

您可以尝试使用：

<md-tabs md-dynamic-height>
  <md-tab>
    <md-tab-label>Tab label</md-tab-label>
    <md-tab-body>
      <md-content>The tab content</md-content>
    </md-tab-body>
  </md-tab>
</md-tabs>

【讨论】：

我爱你。太感谢了。（是的，我们在 2018 年使用 AngularJS，杀了我）
@Baruch 兄弟我能感觉到你的痛苦！

【解决方案2】：

如果您要解决的问题是选项卡没有占据全部可用高度：

据我所知，通过现有的 md 属性是不可能做到这一点的（我已经花了几个小时研究这个）
团队不会很快修复它（请参阅 ThomasBurleson 于 2016 年 6 月 10 日在此处发表的评论：https://github.com/angular/material/issues/2254）
这是一种对我有用的解决方法：

确保每个父元素都有layout="column" 和layout-fill 属性（或layout-column 和layout-fill 类）。这包括 <ng-outlet> 如果这与您的用例相关。

关于通过组件路由器创建的自定义组件的重要说明：

在我的例子中，我的 html 结构是 ng-outlet -> custom-component -> md-card -> md-tabs

我将layout="column" 和layout-fill 添加到<ng-outlet> 和<md-card> 并将layout="column" 添加到<md-tabs>。但是，我找不到将它们添加到 <account-component> 的方法（因为它是由 Angular 动态创建的）所以我最终做的是将这个（有点 hacky）代码添加到我的组件控制器（ES6，但应该是可以理解的，即使你写 ES5):

import template from './account.html';

export const accountComponent = {
    template: template,
    controller: accountController,
};

/*@ngInject*/
function accountController (accountService) {
    this.data = accountService.getAccountData();

    /*** THIS IS THE HACKY PART THAT SOLVED IT FOR ME: ***/
    this.$routerOnActivate = function () { // nextRoute
        const classes = document.querySelector('account-component').classList;
        classes.add('layout-column');
        classes.add('layout-fill');
    };
}

【讨论】：

【解决方案3】：

我认为 layout-fill 在这种情况下不会像您预期的那样工作，因为 md-tab 指定了标题和内容，而我认为您希望内容扩展以填充父项。

您可能想尝试将md-dynamic-height 选项添加到md-tabs 指令，该指令应该强制角度材料为选项卡设置一致的高度。

【讨论】：

【解决方案4】：

您需要将属性“md-dynamic-height”传递给 yr md-tabs 指令。下面的代码可以正常工作。

  <md-content layout="column">
      <md-tabs md-dynamic-height flex>

        <md-tab id="tab1">
          <md-tab-label>Item One</md-tab-label>
          <md-tab-body>
            <md-list>
              <md-subheader class="md-no-sticky">3 line item</md-subheader>
              <md-list-item class="md-3-line" ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,50]">
                <div class="md-list-item-text">
                  <h3>sdfs</h3>
                  <h4>sdfsd</h4>
                  <p>sdfsdf</p>
                </div>
              </md-list-item>
            </md-list>
          </md-tab-body>
        </md-tab>

        <md-tab id="tab2">
          <md-tab-label>Item Two</md-tab-label>
          <md-tab-body>
            <md-list>
              <md-subheader class="md-no-sticky">3 line item</md-subheader>
              <md-list-item class="md-3-line" ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,50]">
                <div class="md-list-item-text">
                  <h3>sdfs</h3>
                  <h4>sdfsd</h4>
                  <p>sdfsdf</p>
                </div>
              </md-list-item>
            </md-list>
         </md-tab-body>
        </md-tab>

  </md-tabs>   
 </md-content>

【讨论】：