angular注解（装饰器）

常用装饰器

@ViewChild

1、获取dom元素

html

 <p #parent>父组件</p>

ts

@ViewChild('parent') el:any
  constructor() {
  }

  ngOnInit(): void {
  }
  ngAfterViewInit(){
    let attrEl = this.el.nativeElement;
    console.log(attrEl)
    attrEl.style.color="blue"
}

注：

• ViewChild中的parent必须与标签上的对应，本质上类似于id。el是变量名，:any是声明变量的类型
• ngAfterViewInit，生命周期函数，在视图页面初始化完成后调用，这时候已经可以获取到dom元素
• 通过this.el.nativeElement可以获取到dom元素节点

2、父组件调用子组件

子组件html

<div>
    <p>子组件</p>
</div>

子组件ts

export class SonComponent implements OnInit {
  constructor() { }
  name: string = "sdsd"
  public sayHello(): void {
    console.log("hello world")
  }
  ngOnInit(): void {
  }
}

父组件html

<div class="main">
    <p parent>父组件</p>
    <app-son #son></app-son>
</div>

父组件ts

//导入子组件
import { SonComponent } from '../son/son.component'

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {

  @ViewChild('son') son:any
  //或指定具体的类型，这里推荐指定具体类型
  //@ViewChild('son') son=new SonComponent
  constructor() {
  }
  ngOnInit(): void {
  }
  ngAfterViewInit() {
        console.log("子组件中的属性：",this.son.name)
        //调用子组件的方法
        this.son.sayHello()
  }
}

结果：

@Component

组件，用于包装特定的功能

@Component({
  selector: 'app-parent',  //组件名
  templateUrl: './parent.component.html',  //组件模板位置
  styleUrls: ['./parent.component.scss']  //组件用到的样式
})

@input

定义模块输入，指定父级组件向子组件传递内容

子组件html

<div>
    <p>子组件</p>
    <hr>
    <p>姓名：{{info.name}}</p>
    <p>年龄：{{info.age}}</p>
</div>

子组件ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-son',
  templateUrl: './son.component.html',
  styleUrls: ['./son.component.scss']
})
export class SonComponent implements OnInit {

  @Input() info: any
  constructor() {
    //初始化
    this.info = {
      name: '默认名字',
      age: 12
    }
  }
  ngOnInit(): void {
  }
}

父组件html

<div class="main">
    <p parent>父组件</p>
    <app-son #son [info]="{name:'aaa',age:20}"></app-son>
</div>

@output

子组件向父组件传值

子组件html

<div>
    <p>子组件</p>
    <hr>
    <button (click)="sendInfo()">向父组件传递数据</button>
</div>

子组件ts

export class SonComponent implements OnInit {
  @Output() onSend: EventEmitter<string> = new EventEmitter<string>()
  name: string = "abc"

  constructor() {
  }
  ngOnInit(): void {
  }
  sendInfo(): void {
    this.onSend.emit(this.name)
  }
}

注：

• click事件绑定的函数要添加括号，否则不会执行
• onSend定义的事件，父组件上要执行的回调函数。EventEmitter事件分发，要指定具体的泛型
• this.onSend.emit(this.name) 将参数返回给父组件

父组件html

<div class="main">
    <p parent>父组件</p>
    <app-son #son (onSend)="onSend($event)"></app-son>
</div>

父组件ts

export class ParentComponent implements OnInit {

  constructor() {
  }
  ngOnInit(): void {
  }
  ngAfterViewInit() {

  }
  onSend(info: string) {
    console.log("子组件向父组件传递的值：", info)
  }
}

注：

• 父组件中函数的参数类型必须要与子组件中定义的泛型相同

@NgModule

NgMoule常见于根模块中，声明该模块用到的一些东西

// 装饰器，接受一个元数据对象，告诉angular如何编译和启动应用
@NgModule({
  declarations: [   //配置当前项目运行的组件
    AppComponent, TestComponent
  ],
  imports: [         //配置当前模块运行依赖的其它模块
    BrowserModule
  ],
  providers: [],          //配置项目所需要的服务
  bootstrap: [AppComponent]       //指定应用的根组件，通过引导AppModule来启动应用
})

@ Pipe

管道本质上就是对数据的一种转换

常用内置管道：

date：日期管道，格式化日期
uppercase：将字符串转大写
lowercase：将字符串转小写
titlecase：首个字母大写

<p>时间：{{birthday}}</p>
<p>使用管道后的时间：{{birthday|date:'yyyy-MM-dd HH:mm:ss'}}</p>
<p>字符串大写：{{string|uppercase}}</p>
<p>字符串小写：{{ string | lowercase }} </p>
<p>字符串先小写，再首字母大写：{{string|lowercase|titlecase}}</p>

自定义管道

创建：

ng g p 路径/管道名

会生成以下两个文件：第一个文件用于测试，第二个用于自定义

字符串反转的管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reversedMessage'  //管道的名字
})
export class ReversedMessagePipe implements PipeTransform {
   //value要过滤的内容及类型,args处理条件及类型
  transform(value: string, ...args: any): unknown {
    return value.split('').reverse().join('');
  }
}

使用

<p>原始：{{string}}</p>
<p>反转后：{{string|reversedMessage}}</p>

service 和 @injectable

angular service 和 @injectable

服务用于共享数据，类似于vuex。获取数据和视图展示应该分离，获取数据的方法应该放在服务中。

创建服务

ng g s 路径/服务名

会生成以下两个文件：第一个文件用于测试，第二个用于自定义

服务ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class HeroServiceService {

  name: string = "哈哈"
  constructor() { }
}

使用@Injectable()装饰器来提供元数据，以便让 Angular 把它作为依赖注入到组件中
@Injectable() 装饰器具有一个名叫 providedIn的元数据选项，providedIn设置为’root’，即根组件中，那么该服务就可以在整个应用程序中使用了。
providedIn提供这些值：‘root’ 、‘platform’ 、‘any’ 、null。
对于要用到的任何服务，你必须至少注册一个提供者。服务可以在自己的元数据中把自己注册为提供者，这样可以让自己随处可用。

使用

在模块中使用

import { HeroService } from './services/hero/hero.service';
@NgModule({
  providers: [HeroService],
})

在组件中使用

//导入服务
import { HeroServiceService } from '../hero-service.service'

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {

  //在类构造器中注入服务
  constructor(private heroService: HeroServiceService) {
  }
  ngOnInit(): void {
  }
  ngAfterViewInit() {
    //获取服务
    console.log("服务内的参数：", this.heroService.name)
  }
}