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

Question

对于演示应用程序中的给定布局 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”(全新的官方最终版本)和 angular-mdl“1.7.1”，并将 Webpack 作为模块 bundler 。可以说在 router-outlet 内渲染的所有 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 的直接子元素，angular 将找不到它们。事实上它们是 undefined 并且你什么也看不到。 (原因是mdl html结构不同，需要重构)。

如果我理解正确你正在尝试做什么:请从你的 header-comp 中删除 mdl-layout-header 组件并保留 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 你需要做同样的事情。