[英]How to use bootstrap nav-tabs in angular 4 as parent child components?
My code looks like this i want to use this as parent component and all others tabs are child component. 我的代码看起来像这样,我想将其用作父组件,所有其他选项卡都是子组件。 i want to pass parent components data to all child components how can i achieve it pls help
我想将父组件数据传递给所有子组件,请问如何实现?
<section class="section_custom">
<div class="container-fluid">
<div class="card card-nav-tabs">
<div class="card-header card-header-white">
<div class="nav-tabs-navigation">
<div class="nav-tabs-wrapper pull-right">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="nav-item">
<a class="nav-link active" href="#details" data-toggle="tab">Candidate Details</a>
</li>
<li class="nav-item">
<a [class]="id==null ?'nav-link disabled':'nav-link'" href="#profile" data-toggle="tab">Public Profile</a>
</li>
<li class="nav-item">
<a [class]="id==null ?'nav-link disabled':'nav-link'" href="#login" data-toggle="tab">Account Settings</a>
</li>
<li class="nav-item">
<a [class]="id==null ?'nav-link disabled':'nav-link'" href="#videos" data-toggle="tab">Videos</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="details">
<app-candidate-edit></app-candidate-edit>
</div>
<div class="tab-pane" id="profile">
<app-candidate-profile></app-candidate-profile>
</div>
<div class="tab-pane" id="login">
<app-candidate-login></app-candidate-login>
</div>
<div class="tab-pane" id="videos">
<app-candidate-video-list></app-candidate-video-list>
</div>
</div>
</div>
</div>
</div>
</section>
Would be nice to have some more info. 希望有更多信息。 What data and to what child component.
什么数据和什么子组件。 Because now I can only think of this.
因为现在我只能想到这一点。
<app-chat [comments]="comments" [itemId]="itemId"></app-chat>
In parent itemId: number; comments: Array<{}>;
<app-chat [comments]="comments" [itemId]="itemId"></app-chat>
在父itemId: number; comments: Array<{}>;
itemId: number; comments: Array<{}>;
In app-chat <div *ngIf="comments" class="chatContainer" [style.display]="displayChat" > <!--Some more code--> </div>
在应用程序聊天中
<div *ngIf="comments" class="chatContainer" [style.display]="displayChat" > <!--Some more code--> </div>
Have a look in here it is helpfull https://angular.io/guide/component-interaction How to pass data from parent to child 看看这里对您有帮助https://angular.io/guide/component-interaction如何将数据从父母传递给孩子
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.