0

我如何重用一个包含不同内容的组件。我有quick-links扩展dashboard-panel组件并具有标题和内容的组件。我想重用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 行，但如果我也需要更改整个内容怎么办。实现这一目标的最佳方法是什么

4

1 回答 1

0

您可以使用内容投影，请在此处阅读有关它的详细信息

以下是如何重用<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 {}

堆栈闪电战

于 2021-12-27T22:33:31.947 回答