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> 

在佈局標記（<mdl-layout-header>...</mdl-layout-header>和<mdl-layout-drawer>...</mdl-layout-drawer>分別）

這兩個組件不會呈現到位任何

我正在Angular2「2.0 <header-comp></header-comp>和<drawer-comp></drawer-comp>封裝部分.0「（全新的官方最終版本）和帶有Webpack作爲模塊捆綁器的angular-mdl」1.7.1「。很高興地說，在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的直接子女，角將不會找到他們。實際上他們是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你需要做同樣的事情。