Question

是否可以在组件之间共享相同的行？目前侧面导航栏需要2列，我希望每张卡正好占用3.这就是它现在的样子：

我希望如此：

main.html中：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
    <admin-navbar></admin-navbar>
    </div>
    <admin-cards></admin-cards>
  </div>
</div>

navbar.html：

<div id="sidenav" class="navbar-fixed-left">
  <a routerLink="product" class="list-group-item">
      <i class="fa fa-list"></i>
      <span class="hidden-sm-down">Produkty</span>
  </a>
  <a href="#menu3" class="list-group-item">
        <i class="fa fa-list"></i>
        <span class="hidden-sm-down">Kategorie</span>
   </a>
  <a href="#menu3" class="list-group-item" data-toggle="collapse" data-parent="#sidebar">
  <span class="hidden-sm-down">Zamówienia     <i class="fa fa-caret-down"></i></span>
</a>
  <div class="collapse" id="menu3">
    <a href="#" class="list-group-item" data-parent="#menu2sub1">W trakcie realizacji</a>
    <a href="#" class="list-group-item" data-parent="#menu2sub1">Zrealizowane</a>
    <a href="#" class="list-group-item" data-parent="#menu2sub1">Twoje zamówienia</a>
  </div>
</div>

cards.html：

<div class="col-md-3">
  <div class="card">
    <div class="card text-white h-100 text-center">
      <div class="card-body bg-success">
        <i class="fa fa-user fa-3x"></i>
        <h6>Zamówienia</h6>
        <h1 class="display-4">134</h1>
      </div>
    </div>
  </div>
</div>

<div class="col-md-3">
  <div class="card">
    <div class="card text-white h-100 text-center">
      <div class="card-body bg-info">
        <i class="fa fa-twitter fa-3x"></i>
        <h6>Wiadomości</h6>
        <h1 class="display-4">134</h1>
      </div>
    </div>
  </div>
</div>

<div class="col-md-3">
  <div class="card">
    <div class="card text-white h-100 text-center">
      <div class="card-body bg-warning">
        <i class="fa fa-twitter fa-3x"></i>
        <h6>Spotkania</h6>
        <h1 class="display-4">134</h1>
      </div>
    </div>
  </div>
</div>

看起来，组件内的类不会影响外部组件。在预期的屏幕上我只是把所有内容都放到了main.html中，但目标是在显示时使用* ngFor迭代卡片，另一个原因是将导航栏和卡片分开放在不同的模块中。

Answer 1

不确定这是否是您正在寻找的解决方案，但由于需要在同一级别定义列。迭代一张卡怎么样：

main.html中

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <admin-navbar></admin-navbar>
    </div>
    <admin-card *ngFor="let card of cards" [data]="card" class="col-md-3"></admin-card>
  </div>
</div>

Answer 2

如果将card包裹在card-group中，您应该得到所需的行为。

<div class="card-group col-xs-12">
  <div class="col-sm-4">
    <div class="card">
      <div class="card text-white h-100 text-center">
        <div class="card-body bg-success">
          <i class="fa fa-user fa-3x"></i>
          <h6>Zamówienia</h6>
          <h1 class="display-4">134</h1>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="card">
      <div class="card text-white h-100 text-center">
        <div class="card-body bg-info">
          <i class="fa fa-twitter fa-3x"></i>
          <h6>Wiadomości</h6>
          <h1 class="display-4">134</h1>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="card">
      <div class="card text-white h-100 text-center">
        <div class="card-body bg-warning">
          <i class="fa fa-twitter fa-3x"></i>
          <h6>Spotkania</h6>
          <h1 class="display-4">134</h1>
        </div>
      </div>
    </div>
  </div>
</div>

这是一个StackBlitz来演示：

https://stackblitz.com/edit/angular-mzzbwx?file=app%2Fhello.component.ts

Angular，在两个组件中共享行

2 个答案: