在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
答案 0 :(得分:5)
这在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>
答案 1 :(得分:3)
我绞尽脑汁待了一段时间,希望这篇文章可以帮助将来偶然发现这种搜索的人。
你可能会认为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>
答案 2 :(得分:0)
我不得不用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