angular2如何讓一個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> 

在你的組件TS文件中添加一個函數（在我的例子newBilling（））。這項新功能將允許操縱任何數據，而且將幫助你導航到另一個URL（在我的情況下，從http://localhost:3000/billing至http://localhost:3000/billing/new）

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

然後你的應用路由模塊中添加路徑如下。 '新'是'計費'的孩子。 billing/new將加載一個新組件（這裏是BillingEditComponent）。

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

我希望它有幫助。

Answer 2

有你需要做兩件事情：

顯示/隱藏的div

這部分是容易的，問題的核心。你可以簡單地使用ngif：https://angular.io/api/common/NgIf

CSS佈局

將depened對當前CSS的性質，但在CSS Flexbox將看看或者只是谷歌兩個欄佈局