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＆＃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.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在@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-drawer和mdl-layout-content，您需要执行相同操作。

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

1 个答案: