//创建一个header组件
ng generate component header (简写 ng g c header)
//创建自定义服务service
ng generate service header (简写 ng g s header)
//创建路由
ng generate module app-routing --flat --module=app
<app-header>app-header>
app.component.html
<h1>{{title}}h1>
app.component.ts
export class AppComponent {
public title: string = 'hello world';
}
<img [src]="src" />
<h1 [ngClass]="{'show': true}">{{title}}h1>
<h1 [ngStyle]="{'color': red}">{{title}}h1>
<div [id]='id' [title]='title'>绑定属性div>
<ul>
<li *ngFor="let item of fruits">
{{item}}
li>
ul>
<p *ngIf="fruits.length>2">ngIf判断是否显示p>
<span [ngSwitch]="data">
<p *ngSwitchCase="1">
已付款
p>
<p *ngSwitchCase="2">
待收货
p>
<p *ngSwitchDefault>
完成
p>
span>
<div class="msgBox" #msgBox>12333div>
<button (click)="submit($event)">确定button>
import { Component, ElementRef, ViewChild } from '@angular/core'
export class AppComponent {
@ViewChild('msgBox') msgBox: ElementRef
submit(e){
console.log(this.msgBox.nativeElement)
}
}
<button (click)="onClickEvent($event)">确定button>
app.module.ts
中引入FormsModule
import { BrowserModule } from '@angular/platform-browser'; //BrowserModule,浏览器的解析模块
import { NgModule } from '@angular/core';//angular核心模块
import { AppComponent } from './app.component';//根组建
import { FormsModule } from '@angular/forms'
@NgModule({ //装饰器
declarations: [//声明组件、指令、管道
AppComponent
],
imports: [ //引入项目需要的模块
BrowserModule,
FormsModule
],
providers: [],//声明模块中提供的是什么服务
bootstrap: [AppComponent]//声明模块的组件是什么
})
export class AppModule { } //类
html
中使用
<input type="text" [(ngModel)]="title">
创建管道
//创建管道
ng generate pipe week (简写 ng g p week)
<span>{{item.endTime | week}}span>
week.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'week'
})
export class WeekPipe implements PipeTransform {
transform(value: any, args?: any): any {
var weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
return weekArray[new Date(value).getDay()];
}
}