Рендеринг части компонента в другой компонент

Question

Я довольно новичок в Angular, и мне интересно, возможно ли отобразить часть компонента внутри другого компонента, , как это.

Я мой AppComponent У меня просто есть один router-outlet Как это:

  <router-outlet></router-outlet>

Тогда у меня есть компонент макета с компонентом заголовка и навигации, например:

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

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

В моем компоненте навигации I иметь простую структуру с заголовком, элементами навигации и некоторыми кнопками действий:

<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>

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

<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>
<!---------------------------------------------------->