ng容器上的組件

Question

我試圖將垂直導航組件（出於清晰度）應用於自定義組件（出於可重用性）。 清晰度垂直導航的基本格式為：

<div class="content-container">
    <clr-vertical-nav>
      ... nav content ...
    </clr-vertical-nav>
    <div class="content-area">
         ... site content ...
    </div>
</div>

我的sidenav組件（'[layout-sidenav]'）僅調用Vertical的nav：

布局/ sidenav.html

 <clr-vertical-nav> .... </clr-vertical-nav>

我可以從我的主要組件中應用它並工作：

layout.component.html

<div class="content-container">
    <div layout-sidenav [items]="items"></div>
    <div class="content-area">
        ...site content...
    </div>
</div>

我的問題是，當我在div應用component時，它破壞了sidenav css的清晰度，我需要像ng-container ，但是當我應用它時：

<div class="content-container">
    <ng-container layout-sidenav [items]="items"></ng-container>
    <div class="content-area">
        ...site content...
    </div>
</div>

我有一個錯誤。

LayoutComponent.html:23 ERROR TypeError: el.setAttribute is not a function
at EmulatedEncapsulationDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setAttribute (platform-browser.js:1317)
at EmulatedEncapsulationDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.EmulatedEncapsulationDomRenderer2.applyToHost (platform-browser.js:1385)
at DomRendererFactory2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DomRendererFactory2.createRenderer (platform-browser.js:1242)
at AnimationRendererFactory.push../node_modules/@angular/platform-browser/fesm5/animations.js.AnimationRendererFactory.createRenderer (animations.js:127)
at DebugRendererFactory2.push../node_modules/@angular/core/fesm5/core.js.DebugRendererFactory2.createRenderer (core.js:12225)
at createComponentView (core.js:11179)
at callWithDebugContext (core.js:12204)
at Object.debugCreateComponentView [as createComponentView] (core.js:11715)
at createViewNodes (core.js:11220)
at createEmbeddedView (core.js:11163)

Answer 1

您的layout-sidenav有一個模板，因此它顯然是一個組件，而不是指令。 組件具有屬性選擇器而不是元素選擇器的情況非常少見，在您的情況下，看來您的選擇器應該是layout-sidenav ，而不是[layout-sidenav] 。

現在，查看您所遇到的錯誤，似乎您正在向layout-sidenav組件的主機添加一個屬性。 <ng-container> 不是HTML元素 ，因此不能向其添加屬性，類或事件偵聽器。

長話短說，您絕對應該為組件使用元素選擇器，並將其用作：

<layout-sidenav [items]="items"></layout-sidenav>