angular入门笔记

angular入门笔记
1，生命周期：
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy

2，属性绑定

<ng-container *ngIf=“isMax; else esleTemplate”>

条件判断语法 isMax === ture

<ng-template #esleTemplate>

条件判断语法 isMax === false

div *ngFor=“let item of colors let ii=index let isOdd=odd”> //colors:Array = [‘red’,‘yellow’,‘blue’,‘green’,‘gray’]
{{ii}}
{{isOdd}}
{{item}}

<button (click)=“clickFun($event)”>–click–

<input #userName type=“text” (input)=“inputChange($event)” name=“” id=“”>

<button (click)=“getUserName(userName.value)”>获取input内容提供

<button (click)=“getUserName(boxDiv)”>获取input内容提供

inputName:{{inputName}}

年龄：<input type=“text” [formControl]=“age”> // age:FormControl = new FormControl(‘’);

提交年龄：{{age.value}}

<button (click)=“defaultAge()”>默认年龄

// loginForm:FormGroup = new FormGroup({
// userName:new FormControl(‘’),
// password:new FormControl(‘’)
// })
// formData={
// name:‘’,
// password:‘’
// }

账号111:

Date:{{dateNew}}

Date111 : {{dateNew111}}

{{dateNew111 | date:'yyyy-MM-dd HH:mm:ss'}}

---

上面这些内容的注释部分代码所在的文件----hello.component.ts

import { Component } from ‘@angular/core’;
import { FormControl,FormGroup,FormBuilder,Validators } from ‘@angular/forms’;
import { ActivatedRoute } from ‘@angular/router’;

@Component({
selector: ‘app-hello’,
templateUrl: ‘./hello.component.html’,
styleUrl: ‘./hello.component.css’
})
export class HelloComponent {
constructor(
private B:FormBuilder,
private routerInfo:ActivatedRoute,

){

}
name: string = ‘Cristina’;
box: string = ‘box’;
item: string = ‘item’;

h3Dom: boolean = true
div3Class: string = ‘h3-dom font-w string’

isActive: boolean = true
isMax:boolean = true

type:number = 2

colors:Array = [‘red’,‘yellow’,‘blue’,‘green’,‘gray’]
inputName: string = ‘’

age:FormControl = new FormControl(‘’);

loginForm:FormGroup = new FormGroup({
userName:new FormControl(‘’),
password:new FormControl(‘’)
})

formData={
name:‘’,
password:‘’
}

dateNew:Date = new Date()

dateNew111:Date = new Date()

ngOnInit():void{
console.log(this.routerInfo.snapshot.queryParams,“----------router info”)
}
clickFun(e:Event){
console.log(e,“----e”)
}
inputChange(e:any){
console.log(e.target.value,“++++e”)
}
getUserName(v:any){
console.log(v,“—vvv”)
}
defaultAge(){
this.age.setValue(“44”)
}
subFormFun(){
console.log(this.loginForm.value)
}
subButtonFun(obj:any){
console.log(obj,“-----obj”)
}
}

---

HOME页面的html

homehomehome works!

<a [routerLink]=“[‘/home/list’]” routerLinkActive=“router-link-active”>list页面

<button (click)=“clickTitle()”>chlicktitle
<app-title (addList)=“addListFun($event)” [title]=“title”>

app.module.ts 内容

import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { FormsModule,ReactiveFormsModule } from ‘@angular/forms’;

import { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;
import { HelloComponent } from ‘./hello/hello.component’;
import { TestPipe } from ‘./pipes/test.pipe’;
import { HomeComponent } from ‘./home/home.component’;
import { TitleComponent } from ‘./title/title.component’;

import { ListService } from ‘./serves/list.service’;
import { ListComponent } from ‘./list/list.component’;

@NgModule({
declarations: [
AppComponent,
HelloComponent,
TestPipe,
HomeComponent,
TitleComponent,
ListComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule
],
providers: [ListService],
bootstrap: [AppComponent]
})
export class AppModule { }

---

app.component.html 入口文件内容

{{title}}

h1标签

<a [routerLink]=“[ ‘/home’]” routerLinkActive=“router-link-active”>首页HomePod


<a [routerLink]=“[ ‘/hello’]” routerLinkActive=“router-link-active” [queryParams]=“{id:3,name:‘tina’}”>hello页面

---

app-routing.module.ts 路由组件内容

import { NgModule } from ‘@angular/core’;
import { RouterModule, Routes } from ‘@angular/router’;

import { HomeComponent } from ‘./home/home.component’;
import { HelloComponent } from ‘./hello/hello.component’;
import { ListComponent } from ‘./list/list.component’;

const routes: Routes = [
{
path:‘’, //数据为空的时候，默认首页是home组件
component:HomeComponent
},

{
path:‘home’,
component:HomeComponent,
children:[
{
path:‘list’,
component:ListComponent,
}
]
},
{
path:‘hello’,
component:HelloComponent
},
{
path:‘**’, //通配符匹配，就是你随便输入一个路由，如果没有设置的话，就默认跳转到home组件
component:HomeComponent
},

];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }