adev/src/app/features/not-found/not-found.html - main - githubmirror/angular

adev/src/app/features/not-found/not-found.html
83 строки3 KB
Kam
fix(docs-infra): only claim a search on the 404 page when results exist
20 июл 2026, 17:04
20 июл 2026, 17:0479fe1c3
<main class="docs-viewer">
  <div class="docs-not-found">
    <img src="assets/images/angie/sad.svg" class="docs-not-found__angie" aria-hidden="true" />
    <div class="docs-not-found__bubble">
      <h1 tabindex="-1">Page Not Found</h1>
      <p>
        We couldn't find what you were looking for.
        @if (searchResults().length > 0) {
          We have initiated a search for the term extracted from the URL.
        }
      </p>
      <p>
        If you think this is a mistake, please
        <a
          href="https://github.com/angular/angular/issues/new?template=3-docs-bug.yaml"
          target="_blank"
        >
          open an issue</a
        >
        so we can fix it.
      </p>
    </div>
  </div>

  <!-- Search results that match the queried URL that we couldn't find  -->
  @if (searchResults().length > 0) {
    <!-- The search results are faded in if/once we have results -->
    <div animate.enter="enter-animation">
      <h2>Feeling lucky?</h2>
      <p>Maybe what you're looking for is in the list below:</p>

      <ul class="docs-search-results docs-mini-scroll-track">
        @for (result of searchResults(); track $index) {
          <li docsSearchItem [item]="result" class="docs-search-result">
            <a
              [relativeTo]="null"
              [routerLink]="'/' + result.url | relativeLink: 'pathname'"
              [fragment]="result.url | relativeLink: 'hash'"
            >
              <div>
                <p class="docs-search-result__label">
                  <!-- Icon -->
                  <span class="docs-search-result-icon" aria-hidden="true">
                    <i role="presentation" class="material-symbols-outlined docs-icon-small">
                      {{ result.type === 'code' ? 'code' : 'description' }}
                    </i>
                  </span>

                  <!-- Page title -->
                  <span [innerHtml]="result.labelHtml"></span>
                  @if (result.package) {
                    <span
                      [innerHTML]="result.package"
                      class="docs-search-result__label__package"
                    ></span>
                  }
                </p>

                @if (result.subLabelHtml) {
                  <p class="docs-search-result__sub-label">
                    <span class="docs-search-result-icon" aria-hidden="true">
                      <i role="presentation" class="material-symbols-outlined docs-icon-small">
                        grid_3x3
                      </i>
                    </span>
                    <span [innerHtml]="result.subLabelHtml"></span>
                  </p>
                }

                @if (result.contentHtml) {
                  <p class="docs-search-result__content" [innerHtml]="result.contentHtml"></p>
                }
              </div>
              <p class="docs-search-result__category">
                {{ result.category }}
              </p>
            </a>
          </li>
        }
      </ul>
    </div>
  }
</main>