前提: 准备一个空的angular项目(ng new angular-course
)
**ng g c components/HelloWorld**
来生成我们的第一个组件hello-world.component.html
组件要显示的内容hello-world.component.scss
组件样式定义,创建项目时可以预先选择css预编译器hello-world.component.ts
组件核心类hello-world.component.spec.ts
组单元测试使用**hello-world.component.ts**
** 组件核心类来看一下内容, 除了常规的导入模块和创建了一个****HelloWorldComponent**
类之外,还使用了**@Component**
装饰器。selector
: 标注组件的名称,在使用组件的时候使用的就是它templateUrl
: 标注html模板的路径styleUrls
: 标注html模板使用的样式的路径,我们看到是用的数组格式,说明传递多个样式文件应该是没有问题的app.module.ts
,打开文件后我看就看到了新创建的组件已经自动的挂载到了全局的app
上。**app.component.html**
内容来显示一下我们自己的组件吧 app.component.html
的内容app
里面: <app-hello-world></app-hello-world>
**ng serve --open**
就可以看到页面显示的是**hello-world works!**
,这就是我们组件创建时自动生成的内容。attribute
]="variable
"/> public imgUrl: string = 'assets/logo.png';
<img [src]="imgUrl" alt="">
event
)="fun($event)">触发一下print
函数print(event: Event) {
console.log('[ print ] >>', 'hello world', '事件类型: ' + event.type);
}
print
函数<button (click)="print($event)">触发一下</button>
attribute
)]="variable
"ng g c components/sizer
@Inout()
装饰器来接收数据,通过@Output
装饰器来派发数据来达到双向数据流通export class SizerComponent {
@Input() size!: number | string;
@Output() sizeChange = new EventEmitter<number>();
dec() { this.resize(-1); }
inc() { this.resize(+1); }
resize(delta: number) {
this.size = Math.min(40, Math.max(8, +this.size + delta));
this.sizeChange.emit(this.size);
}
}
<div>
<button (click)="dec()" title="smaller">-</button>
<button (click)="inc()" title="bigger">+</button>
<label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>
app
,并在app
组件中声明fontSizePx变量<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>
app
中的fontSizePx
属性被传入到sizer
组件中sizer
组件后又将size
更新到了app
中的fontSizePx
属性,页面随之更新public isShow: boolean = true;
<button (click)="isShow = !isShow">{{ isShow ? "不显示" : "显示" }}</button>
<p *ngIf="isShow">Hello World</p>
public list: Array<String> = ['小米', '华为', '苹果'];
<div *ngFor="let item of list; let i = index">
{{ i }} {{ item }}
</div>
public status: number = 1;
<div [ngSwitch]="status">
<div *ngSwitchCase="0">等待中</div>
<div *ngSwitchCase="1">已完成</div>
<div *ngSwitchDefault>未知</div>
</div>
.class1{
background-color: chocolate;
}
.class2{
width: 100px;
height: 50px;
}
.class3{
font-size: 20px;
color: chartreuse;
}
<div [ngClass]="{ class1: false, class2: true, class3: true }">
绑定一组class试试
</div>
在组件html模板中绑定一组style试试
<div [ngStyle]="{ 'background-color': 'chocolate', width: '150px' }">
绑定一组style试试
</div>
public value: string = 'hello world';
<input type="text" [(ngModel)]="value">
<p>value: {{value}}</p>
module
中导入FormsModule
,要不然功能无法实现<div>DatePipe: {{ currentTime | date: "yyyy‐MM‐dd HH:mm:ss" }}</div>
<div>LowerCasePipe: {{ value | lowercase }}</div>
<div>UpperCasePipe: {{ value | uppercase }}</div>
本章我们主要演示了组件的基础使用,可以实现简单的功能,下一章我们要演示的组件间的通讯。还有多少同学在用angular呀,要不是工作需要也不会再接触了,第一次学angualr还是在15年。还有一点哈,原来都是pia pia贴代码,今天头一回自述的多,就当锻炼了,表述不周还请指正哈。