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

Question

我想在点击div之后再显示另一页，如下图所示：

点击之前：

点击后：

Answer 1

您可以显示新组件：

在你的模板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>

在Component TS文件中添加一个函数（在我的示例中为newBilling（））。这个新功能可以操作任何数据，还可以帮助您导航到另一个网址（在我的情况下从http://localhost:3000/billing到http://localhost:3000/billing/new）

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

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

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

我希望它有所帮助。

Answer 2

您需要做两件事：

显示/隐藏分区

这部分很容易，也是问题的核心。您只需使用ngif：https://angular.io/api/common/NgIf

即可

CSS布局

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