使用 angular 组件会破坏 material 布局

Question

在 index.html 中有以下内容和一个简单的 ui 路由器状态，它将组件作为模板加载

<body ng-app="myApp" layout="column">
    <div class="container" layout="row" flex ui-view>
    </div>
</body>

使用存储在文件中的以下模板定义的组件

<md-sidenav md-is-locked-open="true" class="red">sidenav</md-sidenav>
<md-content class="green" flex>content</md-content>

生成的代码将是

 <body ng-app="myApp" layout="column">
       <div class="container" layout="row" flex ui-view>
          <customizing>
             <md-sidenav md-is-locked-open="true" class="red">sidenav</md-sidenav>
             <md-content class="green" flex>content</md-content>
          </customizing>
       </div>
    </body>

标签破坏了 angular material 布局。如果我不使用组件，只使用这样的视图，布局就可以了

<body ng-app="myApp" layout="column">
       <div class="container" layout="row" flex ui-view>
          <md-sidenav md-is-locked-open="true" class="red">sidenav</md-sidenav>
          <md-content class="green" flex>content</md-content>
       </div>
    </body>

有什么想法吗？我也发现了这个 post，但我不知道如何将组件用作属性。可能吗？

见plnkr sample

Answer 1

这在 Plunker

中工作正常

index.html

<div class="container" flex ui-view>
    <customizing layout="row" layout-fill></customizing>
</div>

如果您想了解 layout-fill，这是来自 online docs:

layout-fill forces the layout element to fill its parent container

编辑:

对于下面评论中的 Plunker，试试这个 Plunker

customizing.html

<div layout="row" layout-fill>
    <md-sidenav md-is-locked-open="true" class="red">sidenav</md-sidenav>
    <md-content class="green" flex>content</md-content>
</div>

index.html

<div class="container" flex ui-view>
    <customizing></customizing>
</div>

Answer 2

我不得不使用 css 来解决这个问题。我仍在寻找更简洁的解决方案，例如使用 ui-router 附加 class。但是现在，以下 css 对我有用：

ui-view > *, .ui-view-component-fix > * {
 margin: 0;
 width: 100%;
 min-height: 100%;
 height: 100%;
 flex-direction: row;
 box-sizing: border-box;
 display: flex;
}

请注意，这仅在 ui-view 只有一个 child 时有效。此外，我认为这只是一种解决方法。

在此处查看从您的示例中分叉出来的插件：http://plnkr.co/edit/PBittn9UCd1DMaQs9iY2?p=preview

Answer 3

我为此绞尽脑汁想了一会儿，希望这 post 能对以后偶然发现此搜索的人有所帮助。

您可能认为 ui-router 或 angular 1 个组件会公开 class 定义，但从今天开始您就错了，他们似乎并不打算公开添加它。参见 https://github.com/angular/angular.js/issues/14800。

但是，您可以公开 $element 服务来相当轻松地执行您需要的操作。根据上面的评论，您需要向组件的宿主元素添加一个 class，例如 layout-fill。您可能还想考虑添加 layout-column、layout-row 或 flex 以保留现有的内部 material 布局结构，如 angular-material docs 中所述。请参见下面的示例：

// Using ES6(ES2015) to demonstrate
export function SiteComponent() {
  return {    
    controller: SiteController,
    templateUrl: 'app/site/site.html'
  };
}

class SiteController {

  constructor(   
    // expose the host element (ie: component element) using angular.IRootElementService
    $element
  ) {

    // add class to element (per angular-material) 
    $element.addClass('layout-fill layout-column');

  }
}

// This will result in a component markup that looks like this:
// <site-component class="layout-fill layout-column">...<site-component>

使用 angular 组件会破坏 material 布局

Using angular component breaks material layout

angularjs

angular-material