angular2 如何在单击另一个 div 后使 div 出现在旁边

Question

我想在点击 div 后出现另一个页面，如下图所示：

点击前：

点击后：

Answer 1

您需要做两件事：

显示/隐藏 Div

这部分很简单，也是问题的核心。您可以简单地使用 ngif ：https://angular.io/api/common/NgIf

CSS布局

将取决于当前 CSS 的性质，但请查看 CSS Flexbox 或只是 google 两列布局

Answer 2

你可以让一个新组件出现：

在您的模板中 html 添加一个按钮。并添加您希望组件出现的位置。

<h1>Billing<a (click)="newBilling()"></a></h1>
<div class="col-xs-6">
     <app-billing-list *ngFor="let billingEl of billings; let i = index" 
     [billing]="billingEl" [index]="i">
     </app-billing-list>
</div>
<router-outlet></router-outlet>

在您的组件 TS 文件中添加一个函数（在我的示例中为 newBilling()）。这个新功能将允许操作任何数据，此外还将帮助您导航到另一个 URL（在我的例子中来自 http://localhost:3000/billing to http://localhost:3000/billing/new）

newBilling() { this.router.navigate(['new'], { relativeTo: this.route }); }

然后在您的 app-routing 模块中添加如下路径。 'new' 是 'billing' 的 children。 billing/new 将加载一个新组件（此处为 BillingEditComponent）。

const appRoutes: Routes = [
path: 'billing', component: BillingComponent, children: [
    { path: 'new', component: BillingEditComponent },

希望对您有所帮助。