如何在 angular8 中将一个组件设置为左侧 div，将另一个组件设置为右侧 div?

Question

我有app.component.html页面，其中包含三个组件：

<app-header></app-header>
<app-content></app-content>
<app-footer></app-footer>

在我的header.component.html中，我有两个按钮：

<div class="hor-menu hor-menu-light hidden-sm hidden-xs">
<ul class="nav navbar-nav">
<li class="navbarItem" id="firstNavbarItem">
<a [routerLink]="['./addLeft']" (click)="addActiveClass($event)">
Add left <span class="selected"></span>
</a>
</li>
<li class="navbarItem" id="secondNavbarItem">
<a [routerLink]="['./addRight']" (click)="addActiveClass($event)">
Add right <span class="selected"></span>
</a>
</li>
</ul>
</div>

当我单击按钮"Add left"时，我想更改我的路线并将我的组件设置为app-content组件的左侧div。当我单击按钮"Add right"时，我想将我的组件设置为正确的div。这是我在组件content.component.html代码：

<div class="leftContent">
<router-outlet></router-outlet>
</div>
<div class="rightContent">
<router-outlet></router-outlet>
</div>

在我的app.module.ts中，我有：

const appRoutes: Routes = [
{
path: 'addLeft',
component: AddLeft,
pathMatch: 'full'
},
{
path: 'addRight',
component: AddRight,
pathMatch: 'full'
}
];

有什么办法可以做到这一点吗？

Answer 1

不确定是否应该在同一组件的两个地方使用<router-outlet></router-outlet>，但您可以尝试使用*ngIf

<div class="leftContent" *ngIf="left">
<router-outlet></router-outlet>
</div>
<div class="rightContent" *ngIf="right">
<router-outlet></router-outlet>
</div>

比在你的.ts文件内部添加right: boolean = false和left: boolean = false变量。 比在你的addActiveClass((方法中做一些事情：

addActiveClass(event, position) {
...
if(position === 'right') {
right = true;
left = false;
} else {
left = true;
right = false;
}
...
}

您可能必须使用带有 BehaviorSubject 的服务来在两个组件之间进行通信 https://blog.angulartraining.com/rxjs-subjects-a-tutorial-4dcce0e9637f