使用角度分量会破坏材料布局 [英] Using angular component breaks material layout
问题描述
在index.html中具有以下内容，并且有一个简单的ui路由器状态，该状态将组件作为模板加载
Having the following in index.html and a simple ui router state that loads a compoment as template
<body ng-app="myApp" layout="column">
<div class="container" layout="row" flex ui-view>
</div>
</body>
使用存储在文件中的以下模板定义的组件
Defined component using the following template stored in a file
<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>
标签破坏了角材料的布局.如果我不使用组件，而只是使用这样的视图，那么布局就可以了
The tag breaks the angular material layouting. If I don't use a component, but just a view like this, the layout will be ok
<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 ，但是我无法弄清楚如何将组件用作属性.有可能吗?
Any ideas? Also I found this post, but I can't figure out how to use the component as an attribute. Is it possible?
请参见plnkr示例
推荐答案
在 Plunker
index.html
index.html
<div class="container" flex ui-view>
<customizing layout="row" layout-fill></customizing>
</div>
如果您想了解layout-fill，请访问在线文档:
If you are wondering about layout-fill, this is from the online docs:
layout-fill强制布局元素填充其父容器
layout-fillforces the layout element to fill its parent container
修改:
对于在以下评论中使用的柱塞，请尝试以下柱塞
For the Plunker in your comment below try this Plunker
customizing.html
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
index.html
<div class="container" flex ui-view>
<customizing></customizing>
</div>
这篇关于使用角度分量会破坏材料布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
