Компонент над ng-контейнером

Я пытаюсь применить компонент вертикальной навигации (для ясности) внутри пользовательского компонента (для повторного использования). Базовый формат четкости вертикальной навигации:

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

Мой компонент sidenav ('[layout-sidenav]') вызывает только вертикальную навигацию:

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

angular vmware-clarity
person Stefan Luv    schedule 05.06.2018    source источник
comment
Какую ошибку вы получаете? Можете ли вы поделиться своим кодом? Приведенный фрагмент кода не так информативен :)   -  person Supun Dharmarathne    schedule 05.06.2018
comment
Поделитесь ошибкой   -  person Rohit.007    schedule 05.06.2018
comment
Я обновил свой вопрос   -  person Stefan Luv    schedule 05.06.2018
comment
вы пробовали ng-template?   -  person Supun Dharmarathne    schedule 05.06.2018

Ответы (1)


arrow_upward
1
arrow_downward

У вашего layout-sidenav есть шаблон, поэтому он явно является компонентом, а не директивой. Случаи, когда компонент имеет селектор атрибутов, а не селектор элементов, очень редки, и действительно кажется, что в вашем случае ваш селектор должен быть layout-sidenav, а не [layout-sidenav].

Теперь, глядя на имеющуюся ошибку, кажется, что вы добавляете атрибут к хосту компонента layout-sidenav. <ng-container> является не элементом HTML, поэтому вы не можете добавлять к нему атрибуты, классы или прослушиватели событий.

Короче говоря, вы обязательно должны использовать селектор элементов для своего компонента и использовать его как:

<layout-sidenav [items]="items"></layout-sidenav>
person Eudes    schedule 05.06.2018