[英]angular2-mdl: Break layout in components does not work
For a given layout from the demo-app http://mseemann.io/angular2-mdl/layout 对于演示应用程序http://mseemann.io/angular2-mdl/layout的给定布局
<div class="demo-container" mdl-shadow="2">
<mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
<mdl-layout-header>
<mdl-layout-header-row>
<mdl-layout-title>Title</mdl-layout-title>
<mdl-layout-spacer></mdl-layout-spacer>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href>Link</a>
<a class="mdl-navigation__link" href>Link</a>
<a class="mdl-navigation__link" href>Link</a>
</nav>
</mdl-layout-header-row>
</mdl-layout-header>
<mdl-layout-drawer>
<mdl-layout-title>Title</mdl-layout-title>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href>Link</a>
<a class="mdl-navigation__link" href>Link</a>
<a class="mdl-navigation__link" href>Link</a>
</nav>
</mdl-layout-drawer>
<mdl-layout-content>
<router-outlet ></router-outlet>
</mdl-layout-content>
it works if I copy paste directly in app.html but if I break it up in reusable components. 如果我直接在app.html中复制粘贴,但是如果我在可重用组件中将其分解,它是有效的。 Let's say:
让我们说:
<div class="demo-container" mdl-shadow="2">
<mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
<header-comp></header-comp>
<drawer-comp></drawer-comp>
<mdl-layout-content>
<router-outlet ></router-outlet>
</mdl-layout-content>
Where <header-comp></header-comp>
and <drawer-comp></drawer-comp>
encapsulate part of the layout markup ( <mdl-layout-header>...</mdl-layout-header>
and <mdl-layout-drawer>...</mdl-layout-drawer>
respectively) 其中
<header-comp></header-comp>
和<drawer-comp></drawer-comp>
封装了部分布局标记( <mdl-layout-header>...</mdl-layout-header>
和<mdl-layout-drawer>...</mdl-layout-drawer>
分别)
Both components does not render anything in place 两个组件都不会渲染任何内容
I am running Angular2 "2.0.0" (the brand new official final release) and angular-mdl "1.7.1" with Webpack as module bundler. 我正在运行Angular2“2.0.0”(全新的官方最终版本)和angular-mdl“1.7.1”,Webpack作为模块捆绑器。 It is good to say that all angular2-mdl directives rendered inside router-outlet are rendered properly.
可以说在router-outlet内呈现的所有angular2-mdl指令都可以正确呈现。 This leads to think that angular2-mdl is properly imported and installed.
这导致认为angular2-mdl已正确导入和安装。
More specifically, in app.module.ts
: 更具体地说,在
app.module.ts
:
@NgModule({
imports: [
CommonModule,
FormsModule,
homeRouting,
MdlModule
],
and both in header.ts
and drawer.ts
: 以及
header.ts
和drawer.ts
:
providers: [
MdlLayoutComponent
]
By last if I move one of my reusable component (let's say: <header-comp></header-comp>
) out of the mark up (see below). 最后,如果我将一个可重复使用的组件(比方说:
<header-comp></header-comp>
)移出标记(见下文)。 The template content is rendered properly although the layout looks broken (as expected) 尽管布局看起来很糟糕(正如预期的那样)
<header-comp></header-comp>
<div class="demo-container" mdl-shadow="2">
<mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
<drawer-comp></drawer-comp>
<mdl-layout-content>
<router-outlet ></router-outlet>
</mdl-layout-content>
I can workaround it using plain mdl or duplicating code but... what is happening? 我可以使用普通的mdl或复制代码来解决它但是...发生了什么?
Cheers 干杯
The components mdl-layout-header
, mdl-layout-drawer
and mdl-layout-content
are used as @ContentChild
in mdl-layout
. 组件
mdl-layout-header
, mdl-layout-drawer
和mdl-layout-content
在mdl-layout
中用作@ContentChild
。 If they are not direct childs of mdl-layout
angular will not find them. 如果他们不是
mdl-layout
直接孩子,则会找不到它们。 In fact they are undefined
and you'll see nothing. 实际上它们是
undefined
,你什么也看不见。 (the reason is that the mdl html structure is different and they needs to be restructured). (原因是mdl html结构不同,需要进行重组)。
If I understand right what you are trying to do: please remove the mdl-layout-header
component from your header-comp
and keep the mdl-layout-header
component as a direct child of mdl-layout
- in this way: 如果我理解正确的是你正在尝试做的:请取下
mdl-layout-header
从组件header-comp
并保持mdl-layout-header
组件的一个直接孩子mdl-layout
-以这种方式:
<mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
<mdl-layout-header>
<header-comp></header-comp>
</mdl-layout-header
<mdl-layout-content>
<router-outlet ></router-outlet>
</mdl-layout-content>
</mdl-layout>
For the mdl-layout-drawer
and mdl-layout-content
you need to do the same. 对于
mdl-layout-drawer
和mdl-layout-content
您需要执行相同的操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.