我在Stackblitz上找到了一個側邊欄，我想在我的專案中使用。

有 2 個檔案我不明白，我應該如何適應我的專案app.component.html和app.component.ts.

我必須把 HTML 放在哪里 -> app.component.html

<ng-icon-sidebar>
  <!-- Your content goes here, inside the sidebar's tag. This sample content exists for demonstration purposes. -->
  <ul>
    <li>
      <a href="#">
        <span >
          <i >mail</i>
        </span>
        Inbox
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >send</i>
        </span>
        Outbox
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >favorite</i>
        </span>
        Favorites
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >archive</i>
        </span>
        Archive
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >delete</i>
        </span>
        Trash
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >report</i>
        </span>
        Spam
      </a>
    </li>
  </ul>
  <!-- End of sample content for demonstration purposes. -->
</ng-icon-sidebar>

并且 -> app.component.ts

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  title = 'ng-icon-sidebar';
}

目前在我的專案中，我有 2 個檔案夾Home和Login. 我不知道我應該在哪里/如何為app.component.html和調整側邊欄app.component.ts。

密碼test1在我的專案中 -> Stackblitz

uj5u.com熱心網友回復：

方法一

您可以簡單地將側邊欄 html 代碼放在app.component.html檔案中：

    <ng-icon-sidebar>
  <!-- Your content goes here, inside the sidebar's tag. This sample content exists for demonstration purposes. -->
  <ul>
    <li>
      <a href="#">
        <span >
          <i >mail</i>
        </span>
        Inbox
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >send</i>
        </span>
        Outbox
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >favorite</i>
        </span>
        Favorites
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >archive</i>
        </span>
        Archive
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >delete</i>
        </span>
        Trash
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >report</i>
        </span>
        Spam
      </a>
    </li>
  </ul>
  <!-- End of sample content for demonstration purposes. -->
</ng-icon-sidebar>


<!-- nav -->

<div  style="float: right" *ngIf="currentUser">
  <a  routerLink="/">Home</a>
  <a  (click)="logout()">Logout</a>
</div>

<!-- Top Bar Start -->

<div >
  <div >
    <img
      
      src="https://zupimages.net/up/21/42/010i.gif"
      alt="小專案的側邊欄結構"
    />
  </div>
</div>

<!-- Top Bar End -->

<!-- main app container -->
<router-outlet></router-outlet>

方法二

使用 制作一個新組件ng generare component <component name>，只需從側邊欄專案中復制并粘貼代碼，然后app.component.html像這樣參考這個組件：

<!-- nav -->

<app-[your-component-name]>

<div class="navbar-nav" style="float: right" *ngIf="currentUser">
  <a class="nav-item nav-link" routerLink="/">Home</a>
  <a class="nav-item nav-link" (click)="logout()">Logout</a>
</div>

<!-- Top Bar Start -->

<div class="top-bar">
  <div class="top-bar-logo">
    <img
      class="fit-picture"
      src="https://zupimages.net/up/21/42/010i.gif"
      alt="img"
    />
  </div>
</div>

<!-- Top Bar End -->

<!-- main app container -->
<router-outlet></router-outlet>

我希望我能幫助你。

uj5u.com熱心網友回復：

在您生成組件并從側邊欄專案復制和粘貼代碼后，您應該正確參考名稱ng-icon-sidebarnot app-sidebar。

這應該可以解決問題。

標籤：有角的 打字稿

上一篇：如何正確地將JSON從Angular傳遞到SpringBoot？

下一篇：ngdeep特定組件或元素的角度