Angular 同組件不同模板

Question

我如何重用一個包含不同內容的組件。 我有擴展dashboard-panel組件並具有標題和內容的組件quick-links 。 我想重用具有不同標題和內容的quick-links組件

<dashboard-panel>
    <span class="title">Getting Started</span>
    <div class="content">
        <div class="wrapper">
            <div class="inner">
                <a href="" target="_blank">
                    <i class="material-icons icon-promote">north_east</i>
                    <span>Promote Yourself</span>
                </a>
            </div>
            <div class="inner">
                <a href="" target="_blank">
                    <i class="material-icons icon-pro-page">stars</i>
                    <span>Set Up Pro Page</span>
                </a>
            </div>
            <div class="inner">
                <a href="" target="_blank">
                    <i class="material-icons icon-play">play_arrow</i>
                    <span>Set Up Blaze Player</span>
                </a>
            </div>
            <div class="inner">
                <a href="" target="_blank">
                    <i class="material-icons icon-soundcloud">
                        <img src="assets/img/service-logos/soundcloud.svg" alt="soundcloud" class="">
                    </i>
                    <span>SoundCloud Monetization</span>
                </a>
            </div>
        </div>
    </div>
</dashboard-panel>

就像在這個屏幕上

我只能使用@Input 更改此組件的標題，因為它只有 1 行，但如果我也需要更改整個內容怎么辦。 實現這一目標的最佳方法是什么

Answer 1

您可以使用內容投影，請在此處閱讀有關它的詳細信息

以下是如何重用具有不同值的<dashboard-panel>組件：

    <dashboard-panel>
      <div class="title">Getting Started</div>
      <div class="button1">Promote Yourself</div>
      <div class="button2">Set Up Pro Page</div>
      <div class="button3">Set Up Blaze Player</div>
      <div class="button4">SoundCloud Monetization</div>
    </dashboard-panel>

以下是接收投影內容的組件內部的投影工作方式（注意<ng-content select="..."> ）：

@Component({
  selector: 'dashboard-panel',
  template: `
  <span class="title">
    <ng-Content select="div.title"></ng-Content> <!-- Projection -->
  </span>
  <div class="content">
      <div class="wrapper">
          <div class="inner">
              <a href="" target="_blank">
                  <i class="material-icons icon-promote">north_east</i>
                  <span>
                    <ng-content select="div.button1"></ng-content> <!-- Projection -->
                  </span>
              </a>
          </div>
          <div class="inner">
              <a href="" target="_blank">
                  <i class="material-icons icon-pro-page">stars</i>
                  <span>
                  <ng-content select="div.button2"></ng-content> <!-- Projection -->
                  </span>
              </a>
          </div>
          <div class="inner">
              <a href="" target="_blank">
                  <i class="material-icons icon-play">play_arrow</i>
                  <span>
                    <ng-content select="div.button3"></ng-content> <!-- Projection -->
                  </span>
              </a>
          </div>
          <div class="inner">
              <a href="" target="_blank">
                  <i class="material-icons icon-soundcloud">
                      <img src="assets/img/service-logos/soundcloud.svg" alt="soundcloud" class="">
                  </i>
                  <span>
                    <ng-content select="div.button4"></ng-content> <!-- Projection -->
                  </span>
              </a>
          </div>
      </div>
  </div>
`,
})
export class DashboardPanelComponent {}

堆棧閃電戰