Можно ли поставить компонент в компонент тела?

Question

У меня есть эта проблема. У меня есть компонент вызывает navbar, и это исправление для всех приложений.

<div class="wrapper" fixed>
    <nav id="sidebar" [ngClass]="{'active':!navbarOpen}">
        <div [ngClass]="{'sidebar-header':navbarOpen,'sidebar-header-active':!navbarOpen}" >
            <h3 align="left">CHROMAE PROJECT</h3>
        </div>
    </nav>
    <div id="content" [ngClass]="{'active':!navbarOpen}">
        <nav class="navbar navbar-default fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">                        
                    <div>
                        <button class="btn btn-info navbar-btn" type="button" (click)="myClickEvent()" >
                            <i class="glyphicon glyphicon-align-left"></i>
                            <span>MENÚ</span>
                        </button>

                    </div>
                </div>
                <div align="right">
                    <button class="btn btn-info navbar-btn" align="right" type="button" (click)="logOut()" >
                        <span>LOGOUT</span>
                    </button>
                </div>
            </div>
        </nav>
    </div>
</div>

Так что в других вызовах компонента домой у меня есть это:

<app-navbar>
<div>
    <div *ngIf="getIsAdmin()">
        hola Admin
    </div>
    <div *ngIf="getIsModerator()">
        hola Admin
    </div>
    <div *ngIf="getIsUser()">
        hola Admin
    </div>
</div>

Могу ли я поставить "div" с ngIf, как это?

<app-navbar>


navbar.div with id = content = {
    <div>
        <div *ngIf="getIsAdmin()">
            hola Admin
        </div>
        <div *ngIf="getIsModerator()">
            hola Admin
        </div>
        <div *ngIf="getIsUser()">
            hola Admin
        </div>
    </div>
}

Потому что я тоже пытаюсь добавить внутри nav div класс div с id = "content", который div с * ngIf. Я не знаю, смогу ли я объяснить себя: D

Answer 1

Похоже, вы пытаетесь использовать что-то вроде <ng-content> и проекцию контента. Вот полезная статья , объясняющая это немного.

Вот Stackblitz , демонстрирующий очень маленький пример ng-content.

Для быстрого ознакомления, в вашем "родительском" компоненте (в вашем случае на панели навигации) вы сообщите angular, куда вы хотите поместить вложенный контент, в go:

nav-bar.component. html

<div class="wrapper" fixed>
  <!-- your nav-bar code -->

  <!-- nested content will go here -->
  <ng-content></ng-content>
</div>

Затем, когда вы используете вашу навигационную панель, вы можете "проецировать" контент в этот тег ng-content:

app.component. html (или любой другой компонент)

<nav-bar>
  Here is some content to project into the nav-bar's ng-content
</nav-bar>

Полный код см. В стекаблице. Существует также способ иметь несколько тегов ng-content с помощью селекторов. В статье объясняются те, если вам нужно больше проектируемых слотов.

Похоже, у вас есть какая-то сложная логика c в вашей навигационной панели, поэтому я не пытался воспроизвести ваш код. Небольшая демонстрация должна помочь вам начать в правильном направлении.

Answer 2

Вы можете управлять getIsAdmin в собственном app-nav

Или вы можете использовать <ng-content> в вашем app-navbar

<div class="wrapper" fixed>
   ....
   <ng-content></ng-content>
</div>

Итак, в вашем главном. html вы можете сделать

<app-navbar>
   <div *ngIf="getIsAdmin()">
            hola Admin
   </div>
   ...
</app-navbar>