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>

标签打破了角度材质布局。如果我不使用组件，只是这样的视图，布局就可以了

<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强制layout元素填充其父容器

修改：

对于下面评论中的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

我绞尽脑汁待了一段时间，希望这篇文章可以帮助将来偶然发现这种搜索的人。

你可能会认为ui-router或angular 1组件会暴露一个类定义，但是从今天开始你就错了，看起来它们似乎也不想添加它。请参阅https://github.com/angular/angular.js/issues/14800。

但是，您可以公开$ element服务来轻松地执行您需要的操作。根据上面的评论，您需要在组件的主机元素中添加类似 layout-fill 的类。您可能还需要考虑添加layout-column，layout-row或flex以保持现有的内部材质布局结构，如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>

Answer 3

我不得不用css来解决这个问题。我仍然在寻找一个更清洁的解决方案，比如使用ui-router附加一个类。但就目前而言，以下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只有一个孩子时，这才有效。此外，我认为这只是一种解决方法。

请参阅此示例中分叉的plunker：http://plnkr.co/edit/PBittn9UCd1DMaQs9iY2?p=preview

使用角度分量打破材质布局

3 个答案: