如何使用angular 4中的bootstrap nav-tabs作為父級子組件？

Question

我的代碼看起來像這樣，我想將其用作父組件，所有其他選項卡都是子組件。 我想將父組件數據傳遞給所有子組件，請問如何實現？

<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>

Answer 1

希望有更多信息。 什么數據和什么子組件。 因為現在我只能想到這一點。 <app-chat [comments]="comments" [itemId]="itemId"></app-chat>在父itemId: number; comments: Array<{}>; itemId: number; comments: Array<{}>;

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

看看這里對您有幫助https://angular.io/guide/component-interaction如何將數據從父母傳遞給孩子