angular2-mdl:组件中的断开布局不起作用

时间:2016-09-17 18:13:53

标签: angular angular2-mdl

对于演示应用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>

如果我直接在app.html中复制粘贴但是如果我在可重用组件中将其分解,则它可以正常工作。让我们说:

<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>

<header-comp></header-comp><drawer-comp></drawer-comp>封装部分布局标记(<mdl-layout-header>...</mdl-layout-header><mdl-layout-drawer>...</mdl-layout-drawer>

两个组件都不会渲染任何内容

我正在运行Angular2&#34; 2.0.0&#34; (全新的官方最终版本)和angular-mdl&#34; 1.7.1&#34;使用Webpack作为模块捆绑器。可以说在router-outlet内呈现的所有angular2-mdl指令都可以正确呈现。这导致认为angular2-mdl已正确导入和安装。

更具体地说,在app.module.ts

@NgModule({
    imports: [  
        CommonModule,
        FormsModule,
        homeRouting,
        MdlModule
    ],

以及header.tsdrawer.ts

    providers: [
        MdlLayoutComponent
    ]

最后,如果我将一个可重复使用的组件(让我们说:<header-comp></header-comp>)移出标记(见下文)。尽管布局看起来很破碎(如预期的那样),但模板内容仍然可以正确呈现

<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>

我可以使用普通的mdl或复制代码解决它但是......发生了什么?

干杯

1 个答案:

答案 0 :(得分:4)

组件mdl-layout-headermdl-layout-drawermdl-layout-content@ContentChild中用作mdl-layout。如果他们不是mdl-layout有角度的直接孩子将找不到他们。实际上它们是undefined,你什么也看不见。 (原因是mdl html结构不同,需要重组)。

如果我理解您正在尝试做的事情:请从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>

对于mdl-layout-drawermdl-layout-content,您需要执行相同操作。