创建组件
在项目根目录运行 ng g c 文件夹/组件名称
ng g c components/child
创建完成后会生成组件文件夹
`
html绑定
[innerHTML]="xxx"
属性绑定
[属性]=xxx
class绑定
[class]="xxx"
[class.active]="布尔值"
[ngClass]="{key1:布尔值,key2:布尔值}"
组件装饰器
@Component({
selector: 'app-child', // 引用的标签
templateUrl: './child.component.html', // 组件的模板路径
styleUrls: ['./child.component.css'] // 组件的css路径
})
组件的类
export class ChildComponent implements OnInit {
}
// implements 实现接口
// OnInit 组件的生命周期-初始化
组件参数的传递
父传子
<app-child [list]="list"></app-child>
@Input() list:string[];
子传父
@Output() selNum=new EventEmitter();
selNum.emit("数据")
<app-child [list]="list" (selNum)="setType($event)"></app-child>
父获取子 通过ref
<app-child #child2>
{{child2.list}}
child的list数据必须是public
Ref
<p #refp></p>
import { Component, ViewChild, ElementRef,QueryList,ViewChildren } from '@angular/core';
// 导入组件
@ViewChild("refp",{static:true}) refp:ElementRef;
// 获取操作dom
ngAfterViewInit(){
this.refp.nativeElement //真正的dom节点
}
<div *ngFor="#myitem"></div>
@ViewChildren("myitem") myitem:QueryList<ElementRef>;
ngAfterViewInit(){
this.myitem.forEach(el=>{
el.nativeElement //真正的节点
})
}
服务service
组件间共享的数据和方法提供服务的
创建 ng g s 文件夹/服务名称
ng g s service/search
使用
import {SearchService} from "xxx";
// 导入
constructor （private SearchService:SearchService){}
// 使用
this.SearchService.xxx
