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

时间:2017-07-17 01:55:24

标签: angular typescript angular2-template angular2-directives

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

点击之前:

enter image description here

点击后:

enter image description here

2 个答案:

答案 0 :(得分: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/billinghttp://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 },

我希望它有所帮助。

答案 1 :(得分:0)

您需要做两件事:

显示/隐藏分区

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

即可

CSS布局

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