創(chuàng)建組件
在項(xiàng)目根目錄運(yùn)行 ng g c 文件夾/組件名稱
ng g c components/child
創(chuàng)建完成后會(huì)生成組件文件夾
- .html 模板文件
.css CSS
.ts 組件類
.spc.ts 測(cè)試文件
組件的裝飾器
@Component({
selector: 'app-child', // 引用的標(biāo)簽
templateUrl: './child.component.html', // 組件的模板路徑
styleUrls: ['./child.component.css'] // 組件的css路徑
})
組件的類
export class ChildComponent implements OnInit {
}
// implements 實(shí)現(xiàn)接口
// OnInit 組件的生命周期-初始化
組件傳參
- 父組件給子組件傳參
<app-child [list]='list'></app-child>
import { Component, OnInit,Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
// 使用@Input接收
@Input() list:string
current:any
constructor() {
this.current = null
}
ngOnInit(): void {
}
}
- 子組件給父組件傳參
import { Component, OnInit,Input,Output,EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input() list:string
current:any
// 使用Output和EventEmitter模塊發(fā)送參數(shù)
@Output() send = new EventEmitter<number>()
constructor() {
this.current = null
}
ngOnInit(): void {
}
setCurrent(i) {
this.current = i;
this.send.emit(i)
}
}
<!-- 通過getType方法接受子組件傳過來的參數(shù) -->
<app-child [list]='list' (send)="getType($event)"></app-child>
