有時應用程式開發需要您將資料傳送到元件。這些資料可用於自訂元件或將資訊從父元件傳送到子元件。
Angular 使用一個稱為@Input輸入的概念。這與其他框架中的 props 類似。若要建立輸入屬性，請使用@Input 裝飾器。
在本活動中，您將學習如何使用@Input 裝飾器向組件發送訊息。
Angular 父傳子「傳值」
子元件Ts
- 引入 Input, OnInit => 註解1
- 引入 NgFor
- 引入 RouterLink Navbar 因為有使用RouterLink 必須引入
- @Component() => 註解2
- export class NavbarComponent 改為 export class NavbarComponent implements OnInit
-
export class NavbarComponent implements OnInit 內
@Input() Object 陣列 ex.sendNavLists!: navListType[]
@Input() string 字串 ex.sendPageTitle!: string
@Input() boolean布林值 ex.sendIsActive!: boolean
-
ngOnInit
用來初始化頁面內容，顯示數據綁定、設置 directive 和輸入屬性
在第一次 ngOnChanges 完成後呼叫，只執行一次
註解1:Input 與 OnInit 顧名思義就是進入與輸出，是使用在父子層傳遞資料使用
註解2:@Component() 裝飾器告訴 Angular 這個 class 是一個 Component，而這個裝飾器裡有三個屬性：
- selector – 我們在其他 Component 的 HTML 檔中如何用標籤選中這個 Component 並渲染。
- templateUrl - 要到哪裡去找 HTML 檔案，預設是同個資料夾中的 "元件名稱.component.html"
- styleUrls - 要到哪裡去找專屬這個 Component 的 CSS 檔案，預設是同個資料夾中的 "元件名稱.
component.css"
- imports- 引入其他的依賴(Dependency)
子元件 Html
子元件 寫法
@Input() 參數欄位名稱!: 屬性;
@Input() 參數欄位名稱: 屬性 ｜undefined;
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
| + import { Component, Input, OnInit,Output,EventEmitter } from '@angular/core';
+ import { NgFor } from '@angular/common';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
interface navListType{
title: string,
path: string,
}
@Component({
selector: 'app-navbar',
imports: [
+ NgFor,
+ CommonModule,
+ RouterLink
],
templateUrl: './navbar.component.html',
styleUrl: './navbar.component.scss',
})
// 實作初始化
+ export class NavbarComponent implements OnInit{
+ @Input() sendNavLists!: navListType[];
+ @Input() sendPageTitle!: string;
+ @Input() sendIsActive!: boolean;
@Output() newPageTitle = new EventEmitter<string>();
// 點擊頁面按鈕函式
actionList(titlePage: string) {
this.newPageTitle.emit(titlePag);
}
+ ngOnInit(): void {}
}
|
子元件 Html
1
2
3
4
5
6
7
8
| <ul class="nav">
<li *ngFor="let item of sendNavLists ; let i = index"
[ngClass]="sendPageTitle === item.title ? 'activeNav' : ''">
<a [routerLink]="item.path"
(click)="actionList(item.title)"
class="cursor-pointer">{{item.title}}</a>
</li>
</ul>
|
子元件 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
| .nav{
list-style-type: none;
display: flex;
margin:0px auto auto auto;
padding-inline-start: 0px;
background-color: #00bcd4;
width: 100%;
max-width: 100%;
display: flex;
justify-content: center;
height: 50px;
li{
list-style-type: none;
display: flex;
margin: auto 10px;
a{
cursor: pointer;
text-decoration: none;
color:white;
}
}
}
.activeNav{
border-bottom: 1px solid white;
}
|
父元件
父元件 TS
＝> 載入子元件
＝> 以下藉由子元件＠input 欄位來傳值
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
| import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { environment } from '../environments/environment';
+ import { NavbarComponent } from "./components/navbar/navbar.component";
interface navListType{
title: string,
path: string,
}
@Component({
selector: 'app-root',
imports: [
RouterOutlet,
FormsModule,
+ NavbarComponent,
],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
// NavBar 數據
+ navLists: navListType[] = [
+ { title: 'Home' ,path:'/'},
+ { title: 'Users', path: 'user' },
+ {title:'Login',path:'login'}
+ ]
+ pageTitle: string = 'Home';
+ isActive: boolean = false;
ngOnInit(): void {
console.log(environment.production ? 'Production' : '開發中')
}
}
|
父元件 Html
以下藉由子元件＠input 欄位來傳值
1
2
3
4
5
6
7
8
9
10
| <app-navbar
[sendNavLists]="navLists"
[sendPageTitle]="pageTitle"
[sendIsActive]="isActive"
></app-navbar>
<main class="main">
<router-outlet />
</main>
|