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

问题描述

对于演示应用程序中的给定布局 http://mseemann.io/angular2-mdl/layout

For a given layout from the demo-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中，但如果将其分解成可重用的组件，则可以使用.假设:

it works if I copy paste directly in app.html but if I break it up in reusable components. Let's say:

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

Where <header-comp></header-comp> and <drawer-comp></drawer-comp> encapsulate part of the layout markup (<mdl-layout-header>...</mdl-layout-header> and <mdl-layout-drawer>...</mdl-layout-drawer> respectively)

两个组件均未呈现任何内容

我正在运行Angular2"2.0.0"(全新的官方最终版本)，并使用Webpack作为模块捆绑程序运行angular-mdl"1.7.1".可以说，在路由器出口内渲染的所有angular2-mdl指令均已正确渲染.这导致认为angular2-mdl已正确导入和安装.

I am running Angular2 "2.0.0" (the brand new official final release) and angular-mdl "1.7.1" with Webpack as module bundler. It is good to say that all angular2-mdl directives rendered inside router-outlet are rendered properly. This leads to think that angular2-mdl is properly imported and installed.

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

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

以及在header.ts和drawer.ts中都使用:

    providers: [
        MdlLayoutComponent
    ]

最后，如果我将可重用组件之一(例如:<header-comp></header-comp>)从标记中移出(请参阅下文).模板内容可以正确呈现，尽管布局看起来很破(如预期)

By last if I move one of my reusable component (let's say: <header-comp></header-comp>) out of the mark up (see below). The template content is rendered properly although the layout looks broken (as expected)

<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或重复的代码来解决它，但是...发生了什么?

I can workaround it using plain mdl or duplicating code but... what is happening?

欢呼

推荐答案

组件mdl-layout-header，mdl-layout-drawer和mdl-layout-content在mdl-layout中用作@ContentChild.如果它们不是mdl-layout角的直接子代，则将找不到它们.实际上，它们是undefined，您什么也看不到. (原因是mdl html的结构不同，因此需要对其进行重组).

The components mdl-layout-header, mdl-layout-drawer and mdl-layout-content are used as @ContentChild in mdl-layout. If they are not direct childs of mdl-layout angular will not find them. In fact they are undefined and you'll see nothing. (the reason is that the mdl html structure is different and they needs to be restructured).

如果我正确理解您要做什么，请执行以下操作:请从header-comp中删除mdl-layout-header组件，并将mdl-layout-header组件保留为mdl-layout的直接子代-这样:

If I understand right what you are trying to do: please remove the mdl-layout-header component from your header-comp and keep the mdl-layout-header component as a direct child of mdl-layout - in this way:

<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，您需要执行相同的操作.

For the mdl-layout-drawer and mdl-layout-content you need to do the same.

这篇关于angular2-mdl:组件中的中断布局不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！