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

Question

用于演示-app 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 "2.0.0“(全新的官方最终版本)和角质mdl "1.7.1”与Webpack作为模块捆绑。可以说，在路由器出口中呈现的所有angular2-mdl指令都是正确的。这导致人们认为angular2-mdl是正确导入和安装的。

更具体地说，在app.module.ts中：

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

在header.ts和drawer.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或者复制代码来解决这个问题但是..。发生什么事了？

干杯

Answer 1

组件mdl-layout-header、mdl-layout-drawer和mdl-layout-content在mdl-layout中用作@ContentChild。如果它们不是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-drawer和mdl-layout-content，您也需要这样做。