首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何在angular 4中使用bootstrap nav-tab作为父子组件?

如何在angular 4中使用bootstrap nav-tab作为父子组件?
EN

Stack Overflow用户
提问于 2018-05-15 15:28:17
回答 1查看 652关注 0票数 0

我的代码看起来像这样,我想使用它作为父组件,所有其他选项卡都是子组件。我想把父组件的数据传递给所有的子组件,我该怎么做呢?请帮助

代码语言:javascript
复制
<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>
EN

回答 1

Stack Overflow用户

发布于 2018-05-15 15:48:06

如果能有更多的信息就好了。什么数据和到什么子组件。因为现在我只能想到这个。父itemId: number; comments: Array<{}>;中的<app-chat [comments]="comments" [itemId]="itemId"></app-chat>

在应用程序中-聊天<div *ngIf="comments" class="chatContainer" [style.display]="displayChat" > <!--Some more code--> </div>

看看这里,它是很有帮助的https://angular.io/guide/component-interaction如何将数据从父级传递到子级

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50344589

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档