Angular

Angular 實戰Navbar

功能與邏輯

獲取Nav數據 ＝> 初始化宣染active 在Home ＝> 點擊Nav Item 獲取頁面名稱＝＝＝pageTitle 新增active樣式
父對子傳值
子元件引入Input
  • @InPut() => import {Input} 引入Input
  • @InPut() 傳值參數:屬性;
  • implements OnInit =>import {OnInit}引入Input OnInit
  • 使用到a標籤時引入RouterLink
  • 使用到動態Class時引入NgClass
從父元件引入子元件
  • 從父元件引入子元件 如果是父對子傳值 [傳值參數]= 父元件內的傳值欄位參數
1
[傳值參數]= 父元件內的傳值欄位參數
子對父傳值
子元件引入Output,EventEmitter
  • Output () 傳值參數名稱 ＝new EventEmitter<屬性>() ;
  • 函式傳值 this.傳值參數名稱.emit(item)
  • Html =>(傳值參數名稱)="函式（$event）"

以下完整程式碼

父元件

從app.component.ts 引入子元件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
＋import { NavbarComponent } from './components/navbar/navbar.component';
import { CreateNavComponent} from './components/create-nav/create-nav.component';
import { environment } from '../environment/environment'
import { navListType,navListActiveType } from './Types/nav';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
＋  imports: [RouterOutlet,NavbarComponent,CreateNavComponent],
  styleUrl: './app.component.scss'
})

export class AppComponent {
  title = 'vite_project';
  navLists: navListType[] = [
    { title: 'Home', path: '/' },
    { title: 'Users', path: 'users' },
    {title:'Login',path:'login'}
  ]
  isActive: navListActiveType["isActive"] = true;
  pageTitle: navListActiveType["pageTitle"] = "Home";
   actionList(title: string) {
    this.pageTitle = title;
   }
  bgStyle:string ='red'
  ngOnInit() {
     console.log(environment.production ? 'Production' : '開發中')
  }
}

app.component.html檔案內引入子元件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<app-navbar
    [sendNavLists]="navLists"
    [sendPageTitle]="pageTitle"
    [sendIsActive]="isActive"
    (newPageTitle)="actionList($event)"
></app-navbar>
<app-create-nav
    [sendBgStyle]="bgStyle"
    [sendCreateLists]="navLists"
    [sendPageTitle]="pageTitle"
    [sendIsActive]="isActive"
    (newPageTitle)="actionList($event)"
></app-create-nav>

<main class="main">
</main>
<router-outlet />

子元件

navbar.component.ts

  • @InPut() => import {Input} 引入Input
  • @InPut() 傳值參數:屬性;
  • implements OnInit =>import {OnInit}引入Input OnInit
  • 使用到a標籤時引入RouterLink
  • 使用到動態Class時引入NgClass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { NgFor,NgClass } from '@angular/common';
+ import { Component,OnInit ,Input,Output, EventEmitter} from '@angular/core';
import { RouterLink } from '@angular/router'; // a標籤 [RouterLink]
import { navListType } from '../../Types/nav'; // Type屬性
//@Component=>裝飾器
@Component({
  selector: 'app-navbar',
＋  imports: [RouterLink,NgFor,NgClass],
  templateUrl: './navbar.component.html',
  styleUrl: './navbar.component.scss'
})
// 實現初始化 implements OnInit
+ export class NavbarComponent implements OnInit {
    //父對子傳值
＋  @Input() sendNavLists!: navListType[];
＋  @Input() sendPageTitle!: string;
＋  @Input() sendIsActive!: boolean;
    // 子對父傳值
＋  @Output() newPageTitle = new EventEmitter<string>();
 //點擊頁面按鈕函式
  sendActionList(path: string) {
    this.newPageTitle.emit(path);
  }
  ngOnInit(): void {}
}
navbar.component.html
  • *ngFor="let item of sendNavLists ; let i = index"
  • [ngClass]="sendPageTitle === item.title ? 'activeNav' : ''"
  • [routerLink]="item.path"
  • (click)="sendActionList(item.title)"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<nav class="nav">
   <ul>
     <li
+     *ngFor="let item of sendNavLists ; let i = index"
+    [ngClass]="sendPageTitle === item.title ? 'activeNav' : ''"
     >
        <a
+       [routerLink]="item.path"

+        (click)="sendActionList(item.title)"
+        class="cursor-pointer"
        >{{item.title}}</a>
     </li>

   </ul>
 </nav>

scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
ul{
  display: flex;
  li{
    list-style: none;
    display: flex;
    margin: auto 10px;
  }
}
.nav {
  background-color: #ffd207;
  box-shadow: 2px 2px 2px 1px #0003;
  display: flex;
  height: 70px;
  justify-content: center;
  list-style-type: none;
  margin: 0px auto auto auto;
  padding-inline-start: 0px;
  max-width: 100%;
  width: 100%;

  li {
    display: flex;
    list-style-type: none;
    margin: auto 10px;
    &.activeNav {
      border-bottom: 1px solid #333;
    }
    a {
      cursor: pointer;
      color: #333;
      font-size: 1.4rem;
      text-decoration: none;
    }
  }
}

.activeNav {
  border-bottom: 1px solid #333;
}

github