Javascript 在其他组件中渲染组件的一部分

我对Angular很陌生，我想知道是否有可能在另一个组件内部渲染组件的一部分

我的AppComponent我只有一个

路由器插座

，如下所示：

  <router-outlet></router-outlet>

然后我有一个带有标题和导航组件的布局组件，如下所示：

    <app-header></app-header>
    <app-navigation></app-navigation>

    <div class="main">
        <router-outlet></router-outlet>
    </div>

在导航组件中，我有一个简单的结构，带有标题、导航项目和一些动作按钮：

<div class="navigation">
    <div *ngIf="title.length" class="navigation__title">
        <h1>{{title}}</h1>
    </div>
    <div class="navigation__menu">
        <ul>
            <li *ngFor="let menuItem of menuItems" [routerLinkActive]="['active']">
                <a routerLink="{{menuItem.path}}">{{menuItem.title}}</a>
            </li>
        </ul>
    </div>
    <div class="navigation__actions">
        <a *ngFor="let actionButton of actions" (click)="actionButton.path"
            class="btn btn--primary">{{actionButton.title}}</a>
    </div>
</div>

{{title}}



{{actionButton.title}

现在我想知道是否可以从当前活动组件渲染操作按钮，以便将当前组件的单击事件绑定到它们：

<table class="table">
    <thead>
        <tr>
            <th width="20%">Name</th>
            <th width="20%">Emailaddress</th>
            <th width="20%">Phone number</th>
            <th width="40%">Teams</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let employee of employees">
            <td><a (click)="editEmployee(employee.id)">{{employee.firstName}} {{employee.lastName}}</a></td>
            <td>{{employee.emailAddress}}</td>
            <td>{{employee.phoneNumber}}</td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Showing <b>{{employees.length}}</b> out of <b>{{employees.length}}</b> employees</td>
        </tr>
    </tfoot>
</table>

<!-- Render this button in the navgiation component -->
<a class="btn btn--primary" (click)="createEmployee()">Add new</a>
<!---------------------------------------------------->

名称
电子邮件地址
电话号码
团队
{{employee.firstName}{{employee.lastName}}
{{employee.emailAddress}
{{employee.phoneNumber}
在{employees.length}个雇员中显示{{employees.length}}
新增

是的，只需确保它们是同一模块的一部分。然后将零部件插入所需的位置。隐藏您不想用ngIf语句显示的内容。@DavidAguirre我认为这不起作用，因为我想将一个单击事件（位于当前活动组件中）绑定到它。它会起作用。组件之间有多种交互方式。如果您要从一个父级转到另一个子级，请查看viewchild。您可以访问子组件以使用类中的任何单击事件。您的图片非常清晰。但是“当前活动组件”-你能不能让它不那么模棱两可？你在这里指的是哪一部分？如果您可以将它们表示为NavigationComponent或MyComponent1，这将更有帮助。@MichaelD Yes抱歉，当前活动的组件将是

MyComponent1

。我的意思是，在当前激活的路由上下文中，当前处于活动状态。

NavigationComponent

和

HeaderComponent

始终是

AppLayoutComponent

的一部分，我通过服务更新它们。