Question

我试图在自定义组件中应用垂直导航组件（从清晰度）（用于可重用性）。清晰度垂直导航的基本格式是：

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

我的sidenav组件（＆＃39; [layout-sidenav]＆＃39;）只调用垂直导航：

布局/ 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时，它会破坏清晰度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>

ng-container上的组件

1 个答案: