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 作为模块捆绑器。可以说，在 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，您需要这样做。