可以将组件放入主体组件中吗？答案

【问题标题】：It is posible to put a component into a body component?可以将组件放入主体组件中吗？
【发布时间】：2020-07-19 12:30:46
【问题描述】：

我有这个问题。我有一个名为 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>
}

因为我也尝试在导航栏 div 类中添加 id="content" 的 div 与 *ngIf。我不知道我能不能解释一下我自己：D

【问题讨论】：

为什么登录（ getIsAdmin(),getIsModerator(),getIsUser() ）未在逻辑中定义..即 navbar.component.ts 和 navbar.component.html
因为该功能只适用于home-component，不适用于其他。谢谢

标签： html angular

【解决方案1】：

您似乎正在尝试使用 <ng-content> 和内容投影之类的东西。 Here is a useful article 稍微解释一下。

这是一个Stackblitz 演示一个非常小的ng-content 示例。

为了快速参考，在您的“父”组件（在您的情况下是您的导航栏）中，您将告诉 Angular 您想要嵌套内容的位置：

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>

查看 stackblitz 获取完整代码。还有一种方法可以使用选择器来拥有多个ng-content 标签。如果您需要更多的预计插槽，本文会解释这些内容。

您的导航栏中似乎有一些复杂的逻辑，所以我没有尝试重现您的代码。不过，这个小演示应该能让您朝着正确的方向开始。

【讨论】：

【解决方案2】：

你可以在自己的app-nav中控制getIsAdmin

或者你可以在你的应用导航栏中使用<ng-content>

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

所以，在你的 main.html 中你可以这样做

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

【讨论】：

但是如果我这样做我看不到“hola admin”的内容