Angular组件

@Component装饰器

@Component装饰器用于标示这个类是组件类

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

}

• selector属性：指定元素标签名
• templateUrl属性：指定模板路径
• styleUrls属性：指定用到的样式路径

生命周期

钩子	用途及调用时机
ngOnChanges()	在被绑定的输入属性的值发生变化时调用，首次调用一定会发生在ngOnInit()前
ngOnInit()	初始化指令/组件。在第一轮ngOnChanges()完成之后调用，只调用一次
ngDoCheck()	检测变化。在每个Angular变更检测周期中调用，在执行ngOnChanges()和ngOnInit()方法之后调用
ngAfterContentInit()	在把内容投影进组件之后调用。在第一次执行ngDoCheck()后调用，只调用一次
ngAfterContentChecked()	在每次完成被投影组件内容的变更检测之后调用，在执行ngAfterContentInit()和ngDoCheck()方法之后调用
ngAfterViewInit()	在初始化完组件视图及其子视图之后调用，在第一次执行ngAfterContentChecked()方法之后调用，只调用一次
ngAfterViewChecked()	在每次完成组件视图和子视图的变更检测之后调用，在执行ngAfterViewInit()和ngAfterContentChecked()
ngOnDestory()	在Angular每次销毁指令/组件之前调用

1 "parent-ngOnInit"
2 "parent-ngDoCheck"
3 "parent-ngAfterContentInit"
4 "parent-ngAfterContentChecked"
5 "child-one-ngOnInit"
6 "child-one-ngDoCheck"
7 "child-two-ngOnInit"
8 "child-two-ngDoCheck"
9 "child-one-ngAfterContentInit"
10 "child-one-ngAfterContentChecked"
11 "child-two-ngAfterContentInit"
12 "child-two-ngAfterContentChecked"
13 "child-one-ngAfterViewInit"
14 "child-one-ngAfterViewChecked"
15 "child-two-ngAfterViewInit"
16 "child-two-ngAfterViewChecked"
17 "parent-ngAfterViewInit"
18 "parent-ngAfterViewChecked"
19 "parent-ngDoCheck"
20 "parent-ngAfterContentChecked"
21 "child-one-ngDoCheck"
22 "child-two-ngDoCheck"
23 "child-one-ngAfterContentChecked"
24 "child-two-ngAfterContentChecked"
25 "child-one-ngAfterViewChecked"
26 "child-two-ngAfterViewChecked"
27 "parent-ngAfterViewChecked"

组件交互方式

通过@Input把数据从父组件传递到子组件

@Input装饰器标示属性为输入性属性，可用于将父组件的数据传递到子组件中，例如：

<!-- 子组件HTML -->
<label>{{title}}</label>

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

@Component({
    selector: 'app-child-one',
    templateUrl: './child-one.component.html',
    styleUrls: ['./child-one.component.css']
})
export class ChildOneComponent implements OnInit {

    @Input() title;

    constructor() { }

    ngOnInit(): void {}

}

<!-- 父组件HTML -->
<app-child-one [title]="title"></app-child-one>

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

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

    title = 'parent';

    constructor() {}

    ngOnInit(): void {}
}

通过setter监听输入属性值的变化

@Input装饰器可标注在setter方法上，以监听输入属性值的变化

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

@Component({
    selector: 'app-child-one',
    templateUrl: './child-one.component.html',
    styleUrls: ['./child-one.component.css']
})
export class ChildOneComponent implements OnInit {

    private _title;

    @Input()
    set title(title: string) {
        console.log(title); // 每次设置title值都会调用这句代码，起到监听作用
        this._title = title;
    }

    get title(): string {
        return this._title;
    }

    constructor() { }

    ngOnInit(): void {
    }

}

父组件监听子组件事件

子组件暴露一个EventEmitter属性，当事件发生时，子组件利用该属性发出一个事件，这样，父组件绑定到这个事件属性，就能在事件发生时做出回应。

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

@Component({
    selector: 'app-child-one',
    templateUrl: './child-one.component.html',
    styleUrls: ['./child-one.component.css']
})
export class ChildOneComponent implements OnInit {

    @Output() init: EventEmitter<string> = new EventEmitter(); // 定义事件属性

    constructor() { }

    ngOnInit(): void {
        this.init.emit('child init'); // 发出事件
    }

}

<!-- 绑定事件 -->
<app-child-one (init)="onChildInit($event)"></app-child-one>

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

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

    constructor() {}

    ngOnInit(): void {}

    onChildInit(str: string) {
        console.log(str);
    }
}

父组件通过本地变量访问子组件

父组件不能使用数据绑定访问子组件的属性或方法，但是可以在父组件的模板里新建一个本地变量来代表子组件，然后利用这个变量来访问子组件的属性和方法

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

@Component({
    selector: 'app-child-one',
    templateUrl: './child-one.component.html',
    styleUrls: ['./child-one.component.css']
})
export class ChildOneComponent implements OnInit {

    title = 'child-one';

    constructor() { }

    ngOnInit(): void {}

}

{{child.title}}
<app-child-one #child></app-child-one>

父组件调用@ViewChild()方法访问子组件

如果父组件的类需要访问子组件的属性或方法，则无法使用本地变量的方法，可以把子组件作为ViewChild，注入父组件里实现。

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

@Component({
    selector: 'app-child-one',
    templateUrl: './child-one.component.html',
    styleUrls: ['./child-one.component.css']
})
export class ChildOneComponent implements OnInit {

    title = 'child-one';

    constructor() { }

    ngOnInit(): void {}

}

<!-- 父组件HTML -->
<app-child-one></app-child-one>

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { ChildOneComponent } from './child-one/child-one.component';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {

    @ViewChild(ChildOneComponent)
    private childOneComponent: ChildOneComponent;

    constructor() {}
    ngAfterViewInit(): void {
        console.log(this.childOneComponent.title);
    }

    ngOnInit(): void {}
}