HTML Angular material table 内容的代码

Question

我正在创建一个很长的 HTML 页面。我有兴趣添加一个 table 的内容，就像在 angular material 中一样，但是我在任何地方都找不到关于它的任何文档。这是我正在寻找的 table 类型的内容：

Angular Table of Contents(https://imgur.com/3VcXg18)

我看过一些 npm 替代品，但我对那些不感兴趣。

angulartable内容的代码如下：

<table-of-contents container=".mat-drawer-content" _nghost-lwx-c20="" class="ng-star-inserted">
          <!---->
          <div _ngcontent-lwx-c20="" class="docs-toc-container ng-star-inserted">
            <div _ngcontent-lwx-c20="" class="docs-toc-heading">Contents</div>
            <nav _ngcontent-lwx-c20="">
              <!----><a _ngcontent-lwx-c20="" href="/components/datepicker/overview#connecting-a-datepicker-to-an-input"
                class="docs-level-h3 docs-link ng-star-inserted"> Connecting a datepicker to an input </a><a
                _ngcontent-lwx-c20="" href="/components/datepicker/overview#setting-the-calendar-starting-view"
                class="docs-level-h3 docs-link ng-star-inserted"> Setting the calendar starting view </a><a
                _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#watching-the-views-for-changes-on-selected-years-and-months"
                class="docs-level-h4 docs-link ng-star-inserted"> Watching the views for changes on selected years and
                months </a><a _ngcontent-lwx-c20="" href="/components/datepicker/overview#setting-the-selected-date"
                class="docs-level-h3 docs-link ng-star-inserted"> Setting the selected date </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#changing-the-datepicker-colors"
                class="docs-level-h3 docs-link ng-star-inserted"> Changing the datepicker colors </a><a
                _ngcontent-lwx-c20="" href="/components/datepicker/overview#date-validation"
                class="docs-level-h3 docs-link ng-star-inserted"> Date validation </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#input-and-change-events"
                class="docs-level-h3 docs-link ng-star-inserted"> Input and change events </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#disabling-parts-of-the-datepicker"
                class="docs-level-h3 docs-link ng-star-inserted"> Disabling parts of the datepicker </a><a
                _ngcontent-lwx-c20="" href="/components/datepicker/overview#touch-ui-mode"
                class="docs-level-h3 docs-link ng-star-inserted"> Touch UI mode </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#manually-opening-and-closing-the-calendar"
                class="docs-level-h3 docs-link ng-star-inserted"> Manually opening and closing the calendar </a><a
                _ngcontent-lwx-c20="" href="/components/datepicker/overview#internationalization"
                class="docs-level-h3 docs-link ng-star-inserted"> Internationalization </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#setting-the-locale-code"
                class="docs-level-h4 docs-link ng-star-inserted"> Setting the locale code </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings"
                class="docs-level-h4 docs-link ng-star-inserted"> Choosing a date implementation and date format
                settings </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#customizing-the-parse-and-display-formats"
                class="docs-level-h4 docs-link ng-star-inserted"> Customizing the parse and display formats </a><a
                _ngcontent-lwx-c20="" href="/components/datepicker/overview#customizing-the-calendar-header"
                class="docs-level-h4 docs-link ng-star-inserted"> Customizing the calendar header </a><a
                _ngcontent-lwx-c20="" href="/components/datepicker/overview#localizing-labels-and-messages"
                class="docs-level-h4 docs-link ng-star-inserted"> Localizing labels and messages </a><a
                _ngcontent-lwx-c20="" href="/components/datepicker/overview#highlighting-specific-dates"
                class="docs-level-h4 docs-link ng-star-inserted"> Highlighting specific dates </a><a
                _ngcontent-lwx-c20="" href="/components/datepicker/overview#accessibility"
                class="docs-level-h3 docs-link ng-star-inserted"> Accessibility </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#keyboard-interaction"
                class="docs-level-h4 docs-link ng-star-inserted"> Keyboard interaction </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#troubleshooting" class="docs-level-h3 docs-link ng-star-inserted">
                Troubleshooting </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#error-matdatepicker-no-provider-found-for-dateadapter-mat_date_formats"
                class="docs-level-h4 docs-link ng-star-inserted"> Error: MatDatepicker: No provider found for
                DateAdapter/MAT_DATE_FORMATS </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#error-a-matdatepicker-can-only-be-associated-with-a-single-input"
                class="docs-level-h4 docs-link ng-star-inserted"> Error: A MatDatepicker can only be associated with a
                single input </a><a _ngcontent-lwx-c20=""
                href="/components/datepicker/overview#error-attempted-to-open-an-matdatepicker-with-no-associated-input-"
                class="docs-level-h4 docs-link ng-star-inserted"> Error: Attempted to open an MatDatepicker with no
                associated input. </a></nav>
          </div>
        </table-of-contents>

当我尝试运行这段代码时，控制台打印 <table-of-contents> is not a known element

Answer 1

因此，对于那些运行遇到类似情况的人，我将在下面发布解决方案，该解决方案是您自己创建组件。我检查了 angular material 并重建了它。

这是您需要的 HTML 代码：

<div class="tableOfContentContainer">
  <div class="tableOfContent docs-toc-container">
    <div class="docs-toc-heading">Contents</div>
    <nav>
      <a href="/components/list/overview#simple-lists" class="docs-level-h3 docs-link ng-star-inserted">Simple lists</a>
      <br>
      <a href="/components/list/overview#navigation-lists" class="docs-level-h3 docs-link ng-star-inserted">Navigation lists</a>
    </nav>
  </div>
</div>

这是关联的 CSS:

.tableOfContentContainer{
    padding-top: 1em;
    padding-left: 2em;
    position: fixed;
}
.docs-toc-container {
    border-left: 4px solid #3f51b5;
    font-weight: 700;
}
a {
    text-decoration: none;
    color: #737373;
    font-weight: 400 !important;
}
a:hover{
    color: #3f51b5;
}
.tableOfContent{
    padding: 5px 0 10px 10px;
    font-size: 13px;
}

这应该就是您所需要的。可能缺少一些样式，因为我的项目有很多其他 css 样式。祝大家好运，希望对您有所帮助！

HTML Angular material table 内容的代码

HTML code for Angular material table of contents

html

tableofcontents

angular