使用角度组件破坏材料布局 [英] Using angular component breaks material layout
问题描述
在 index.html 中有以下内容和一个简单的 ui 路由器状态，它加载一个组件作为模板
<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 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 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>有什么想法吗?我也发现了这个 post，但我无法弄清楚如何将组件用作属性.可能吗?
参见 plnkr 示例
这在 Plunker
index.html
<customizing layout="row" layout-fill></customizing>如果您对 layout-fill 感到疑惑，请参考 在线文档:
layout-fill 强制布局元素填充其父容器
编辑:
对于下方评论中的 Plunker 试试这个 Plunker
customizing.html
<md-sidenav md-is-locked-open="true" class="red">sidenav</md-sidenav><md-content class="green" flex>content</md-content>index.html
<定制></定制>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>
Generated code will be
<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>
Any ideas? Also I found this post, but I can't figure out how to use the component as an attribute. Is it possible?
See plnkr sample
This works okay in Plunker
index.html
<div class="container" flex ui-view>
<customizing layout="row" layout-fill></customizing>
</div>
If you are wondering about layout-fill, this is from the online docs:
layout-fillforces the layout element to fill its parent container
Edit:
For the Plunker in your comment below try this 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>
这篇关于使用角度组件破坏材料布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
