Home > Article > Web Front-end > Let's take a look at the related concepts of angular10 components in one article
Let's take a look at the related concepts of angular10 components in one article
- 青灯夜游forward
- 2021-07-27 10:06:142127browse
This article will give you an understanding of the components in angular10, and introduce the component elements, component life cycle, communication between components and the basic use of dynamic components. Let’s take a look together.
【Related tutorial recommendation: "angular tutorial"】
Component components
- html template
- typescript, defines behavior
- css group, can introduce multiple css files, so multiple css files can be defined in one component
//从angular主模块中引入Component(组件装饰器或组件注解)
import { Component } from '@angular/core';
//装饰器中以json的形式声明元数据
@Component({
//它指定了一个叫 57b7f9effa9cadc72edb88082c9f873b 的元素。 该元素是 index.html 文件里的一个占位符
//为什么这个组件跟入口index建立了联系呢？因为入口main.ts中绑定了主模块为appModule
selector: 'app-root', //在模板中找对应的标签，找到后创建并插入该组件实例
templateUrl: './app.component.html', // html模板
styleUrls: ['./app.component.css'], // css样式，可以引入多个css文件
// 这个属性（内联模板）和templateUrl（外联模板）二选一，template后面可以直接跟html字符串
// 注意在模板语法（反引号）中是使用插值表达式，不能使用${}插入值
template: `4a249f0d628e2318394fd9b75b4636b1{{title}}473f0a7621bec819994bb5020d29372a`
})
//组件控制器，写逻辑代码的地方
export class AppComponent {
title = 'myAngular';
//构造函数可以用来进行属性的声明和初始化语句
//在angular里面有个特别重要的点要记住：只能通过构造函数注入依赖
constructor() {}
}
Prerequisites
- Install Angular CLI (npm install -g @angular/cli)
- Create an Angular project (ng new)
If these two conditions are not met, please refer to setting up the environment.
How to create a component
Create a component using Angular CLI
ng generate component <project-name> // 创建一个组件 ng g c <project-name> // 缩写
Some other options commonly used to create components
ng g c <project-name> --skip-tests // 创建一个组件，且不用安装测试文件 ng g c <project-name> --inline-style // 缩写-s，内联样式 ng g c <project-name> --inline-template // 缩写-t，内联模板 ng g c <project-name> --module= <module-name> // 指定创建的组件在哪个模块引用，在多个模块的项目中会用到
In addition to automatically generating components through angular cli, you can also create components manually (not recommended), which will not be introduced here.
The life cycle of components (high-level content, master ngOnInit, ngOnDestroy, ngOnChanges, ngAfterViewInit())
There are only two life cycles that can often be used in work (ngOninit and ngOnDestroy), other life cycles are rarely used; but if you can master the life cycle of components, you will have a deeper understanding of angular.
Life cycle meaning
The life cycle of a component instance begins when Angular instantiates the component class and renders the component view and its subviews . The lifecycle is always accompanied by change detection, with Angular checking when data-bound properties change and updating view and component instances as needed. The life cycle ends when Angular destroys the component instance and removes the template it rendered from the DOM. Directives have a similar lifecycle as Angular creates, updates, and destroys instances during execution.
Application:
Your application can use life cycle hook methods to trigger key events in the component or directive life cycle to initialize new instances and start change detection when needed. During the change detection process to respond to updates and clean up before deleting the instance.
How to implement life cycle events
Each component or directive can implement one or more life cycle hooks, which can Perform operations on component or directive instances when appropriate.
Each interface has a unique hook method, and their names are composed of the interface name plus the ng prefix. For example, the hook method of the OnInit interface is called ngOnInit(). If you implement this method in a component or directive class, Angular will call it after first checking the component or directive's input properties
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['./app.component.css'],
template: `<h1>{{title}}</h1>`
})
// 实现OnInit生命周期，可以实现多个生命周期
export class AppComponent implements OnInit{
title = 'myAngular';
constructor() {}
ngOnInit(){
console.log("Angular在首次检查完组件的输入属性后，然后调用它，只调用一次")
}
}Lifecycle Overview
| Hook | Timing | Use | Note |
|---|---|---|---|
| ngOnChanges() | Called when the value of the bound input property changes, the first call must occur before ngOnInit() | When Angular sets or resets data binding response when input attribute. This method accepts a SimpleChanges object of the current and previous property values | This happens very frequently, so anything you do here will significantly impact performance. |
| ngOnInit() | Called after the first round of ngOnChanges() is completed, only called once. | Initialize the directive/component after Angular first displays data binding and sets the directive/component's input properties. A good place for components to get initial data | It’s important to only call once |
| ngDoCheck() | Following each time change detection is performed Called after ngOnChanges() and ngOnInit() when change detection is first performed. | Detect and react when changes occur that Angular is unable or unwilling to detect on its own. | It happens as frequently as ngOnChanges |
| ngAfterContentInit() | The first time ngDoCheck() is called, it is called only once. | Called after Angular projects external content into the component view or the view where the directive is located. | Only called once |
| ngAfterContentChecked() | ngAfterContentInit() and every time after ngDoCheck() is called | Every time Angular Called after checking the content projected into the component or directive. | |
| ngAfterViewInit() | The first time it is called after ngAfterContentChecked(), it is called only once. | Called after initializing the component view and its subviews. | Only called once |
| ngAfterViewChecked() | ngAfterViewInit() and every time after ngAfterContentChecked(). | Called every time after completing the change detection of the component view and subview. | |
| ngOnDestroy() | Called before Angular destroys the directive/component. | Called and cleaned before each directive/component is destroyed by Angular. Unsubscribe to the observable and detach the event handler here to prevent memory leaks. Unsubscribe from observable objects, Clear timers, Unregister all callbacks registered by this command globally or in application services. |
Very important |
重点生命周期详解
初始化组件和指令 ngOnInit
- 在构造函数外部执行复杂的初始化。组件的构造应该既便宜又安全。比如，你不应该在组件构造函数中获取数据。当在测试中创建组件时或者决定显示它之前，你不应该担心新组件会尝试联系远程服务器。ngOnInit() 是组件获取初始数据的好地方。
- 在 Angular 设置好输入属性之后设置组件。构造函数应该只把初始局部变量设置为简单的值。请记住，只有在构造完成之后才会设置指令的数据绑定输入属性。如果要根据这些属性对指令进行初始化，请在运行 ngOnInit() 时设置它们
在实例销毁时进行清理 ngOnDestroy
这里是释放资源的地方，这些资源不会自动被垃圾回收。如果你不这样做，就存在内存泄漏的风险。
- 取消订阅可观察对象和 DOM 事件。
- 停止 interval 计时器。
- 反注册该指令在全局或应用服务中注册过的所有回调。
- ngOnDestroy() 方法也可以用来通知应用程序的其它部分，该组件即将消失
页面埋点
可以在组件中通过ngOnInit和ngOnDestroy方法统计页面的时长，
更好的做法可以通过指令实现ngOnInit和ngOnDestroy生命周期，用来统计页面时长
也可以通过路由守卫来记录页面出入栈所需要的时间
@Directive({selector: '[appSpy]'})
export class SpyDirective implements OnInit, OnDestroy {
constructor(private logger: LoggerService) { }
ngOnInit() { this.logIt(`onInit`); }
ngOnDestroy() { this.logIt(`onDestroy`); }
private logIt(msg: string) {
this.logger.log(`Spy #${nextId++} ${msg}`);
}
}使用变更检测钩子 ngOnchanges
一旦检测到该组件或指令的输入属性发生了变化，Angular 就会调用它的 ngOnChanges() 方法。
因为这个方法会频繁执行，所以要注意判断的计算量，会影响性能。
// 可以监听输入属性的变化
ngOnChanges(changes: SimpleChanges) {
for (const propName in changes) {
const chng = changes[propName];
const cur = JSON.stringify(chng.currentValue);
const prev = JSON.stringify(chng.previousValue);
this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
}
}组件之间的通信（重要，必须掌握）
一、父子组件的通信（基础）
父传子
1、父组件通过属性绑定向子组件传值
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<app-child [msg]="msg"></app-child>
`
})
export class ParentComponent {
msg = '父组件传的值';
}2、子组件通过@Input接收数据
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<p>{{msg}}</p>
`
})
export class ChildComponent {
@Input() msg: String;
}子传父
1、子组件通过自定义事件，向父组件发送数据
import { Component, Input, EventEmitter, Output} from '@angular/core';
,
@Component({
selector: 'app-child',
template: `
<p>{{msg}}</p>
<button (click)="vote()" >发送</button>
`
})
export class ChildComponent {
@Input() msg: String;
@Output() voted = new EventEmitter<boolean>();
vote() {
this.voted.emit("子组件传的值");
}
}2、父组件通过监听自定义事件，接收子组件的传值
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<app-child [msg]="msg" (voted)="voted($event)"></app-child>
`
})
export class ParentComponent {
msg = '父组件传的值';
voted(val){ //监听自定义事件的传值
console.log(val)
}
}子组件怎么监听输入属性值的变化？（2种方法）
1、可以使用一个输入属性@Input()的 setter，以拦截父组件中值的变化。
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: '<h3>"{{name}}"</h3>'
})
export class ChildComponent {
@Input()
get name(): string { return this._name; }
set name(name: string) {
this._name = (name && name.trim()) || '<no name set>';
}
private _name = '';
}2、通过ngOnChange()来截听输入属性值的变化
当需要监视多个、交互式输入属性的时候，本方法比用属性的 setter 更合适。
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-version-child',
template: `
<h3>Version {{major}}.{{minor}}</h3>
<h4>Change log:</h4>
<ul>
<li *ngFor="let change of changeLog">{{change}}</li>
</ul>
`
})
export class VersionChildComponent implements OnChanges {
@Input() major: number;
@Input() minor: number;
changeLog: string[] = [];
ngOnChanges(changes: SimpleChanges) { //ngOnchange适合监听子组件多个输入属性的变化
const log: string[] = [];
for (const propName in changes) {
const changedProp = changes[propName];
const to = JSON.stringify(changedProp.currentValue);
if (changedProp.isFirstChange()) {
log.push(`Initial value of ${propName} set to ${to}`);
} else {
const from = JSON.stringify(changedProp.previousValue);
log.push(`${propName} changed from ${from} to ${to}`);
}
}
this.changeLog.push(log.join(', '));
}
}父组件怎么读取子组件的属性和调用子组件的方法？（2种方法）
1、通过本地变量代表子组件
父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法，如下例所示。
思考：父组件可以通过这种方式读取子组件的私有属性和私有方法吗？
父组件
import { Component } from '@angular/core';
import { CountdownTimerComponent } from './countdown-timer.component';
@Component({
selector: 'app-countdown-parent-lv',
template: `
<h3>Countdown to Liftoff (via local variable)</h3>
<button (click)="timer.start()">Start</button> //调用子组件方法
<button (click)="timer.stop()">Stop</button>
<div class="seconds">{{timer.seconds}}</div> //读取子组件属性
<app-countdown-timer #timer></app-countdown-timer>
`,
styleUrls: ['../assets/demo.css']
})
export class CountdownLocalVarParentComponent { }子组件
import { Component, OnDestroy } from '@angular/core';
@Component({
selector: 'app-countdown-timer',
template: '<p>{{message}}</p>'
})
export class CountdownTimerComponent implements OnDestroy {
intervalId = 0;
message = '';
seconds = 11;
ngOnDestroy() { this.clearTimer(); }
start() { this.countDown(); }
stop() {
this.clearTimer();
this.message = `Holding at T-${this.seconds} seconds`;
}
private clearTimer() { clearInterval(this.intervalId); }
private countDown() {
this.clearTimer();
this.intervalId = window.setInterval(() => {
this.seconds -= 1;
if (this.seconds === 0) {
this.message = 'Blast off!';
} else {
if (this.seconds < 0) { this.seconds = 10; } // reset
this.message = `T-${this.seconds} seconds and counting`;
}
}, 1000);
}
}2、父组件调用@viewChild() （基础，推荐使用）
这个本地变量方法是个简单便利的方法。但是它也有局限性（只能在模板html中使用），因为父组件-子组件的连接必须全部在父组件的模板中进行。父组件本身的ts代码对子组件没有访问权。
当父组件类需要访问子组件时，可以把子组件作为 ViewChild，注入到父组件里面。
父组件类中访问子组件的属性和方法：
import { AfterViewInit, ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import { CountdownTimerComponent } from './countdown-timer.component'; //引入子组件
@Component({
selector: 'app-countdown-parent-vc',
template: `
<h3>Countdown to Liftoff (via ViewChild)</h3>
<button (click)="start()">Start</button>
<button (click)="stop()">Stop</button>
<div class="seconds">{{ seconds() }}</div>
<app-countdown-timer></app-countdown-timer>
`,
styleUrls: ['../assets/demo.css']
})
export class CountdownViewChildParentComponent implements AfterViewInit {
//通过 @ViewChild 属性装饰器，将子组件 CountdownTimerComponent 注入到私有属性 timerComponent 里面。
@ViewChild(CountdownTimerComponent)
private timerComponent: CountdownTimerComponent;
seconds() { return 0; }
// angular创建了组件的子视图后会调用它，注意获取子组件的属性，要在子组件视图加载之后
ngAfterViewInit() {
// 访问子组件属性
setTimeout(() => this.seconds = () => this.timerComponent.seconds, 0);
}
start() { this.timerComponent.start(); } // 访问子组件的方法
stop() { this.timerComponent.stop(); }
}注意：（使用场景很多，必须掌握）
ngAfterViewInit() 生命周期钩子是非常重要的一步。被注入的计时器组件只有在 Angular 显示了父组件视图之后才能访问，所以它先把秒数显示为 0.
然后 Angular 会调用 ngAfterViewInit 生命周期钩子，但这时候再更新父组件视图的倒计时就已经太晚了。Angular 的单向数据流规则会阻止在同一个周期内更新父组件视图。应用在显示秒数之前会被迫再等一轮。
使用 setTimeout() 来等下一轮，然后改写 seconds() 方法，这样它接下来就会从注入的这个计时器组件里获取秒数的值。
二、组件通过服务来通信（发布订阅者模式，基础，必须掌握）
父组件和它的子组件共享同一个服务，利用该服务在组件家族内部实现双向通信。
不仅局限于父子组件，只要组件与组件共享同一个服务，就可以实现数据通信。
<!--parent.component.html-->
<p style="width: 1000px;margin: auto">
<p class="card" style="width: 500px;float: left">
<p class="card-header"> 父组件</p>
<p class="card-body">
<h5 class="card-title">父组件</h5>
<p class="form-group">
<label for="serviceoutput">父组件服务输入：</label>
<input type="text"
class="form-control"
id="serviceoutput"
placeholder="服务输入"
[(ngModel)]="serviceInput"
>
</p>
<button class="btn btn-primary" (click)="clickService()">Service方式</button>
</p>
</p>
<app-child></app-child>
</p><!--child.component.html-->
<p class="card" style="width: 500px;">
<p class="card-header">子组件</p>
<p class="card-body">
<h5 class="card-title">子组件</h5>
<p class="form-group">
<label for="serviceoutput">子组件服务输入：</label>
<input type="text"
class="form-control"
id="serviceoutput"
placeholder="服务输入"
[(ngModel)]="serviceInput"
>
</p>
<button class="btn btn-primary" (click)="clickService()">Service方式</button>
</p>
</p>//服务重点
//meditor.service.ts
import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class MeditorService {
private subject = new Subject<MeditorMsg>();
constructor() {}
// 获取订阅者
public getObservable(): Observable<MeditorMsg> {
return this.subject.asObservable();
}
// 推送信息
public push(msg: MeditorMsg) {
this.subject.next(msg);
}
}
// 中间者信息
export interface MeditorMsg {
id: string;
body: any;
}subscription: Subscription = null; //初始化一个订阅对象
//子组件构造函数，用于监听数据推送
constructor(private meditor: MeditorService) {
this.subscription = meditor.getObservable().subscribe(
msg => {
console.log(msg);
if (msg.id === 'parent') { //id为parent，获取父组件数据
this.serviceInput = msg.body;
}
}
);
}
// 子组件将数据推送到中间着，给订阅者
clickService() {
this.meditor.push({id: 'parent', body: this.serviceInput});
}
//父组件构造函数，用于监听数据推送
constructor(private meditor: MeditorService) {
this.subscription = meditor.getObservable().subscribe(
msg => {
console.log(msg);
if (msg.id === 'child') { //id为child，获取子组件数据
this.serviceInput = msg.body;
}
}
);
}
// 父组件将数据推送到中间着，给订阅者
clickService() {
this.meditor.push({id: 'parent', body: this.serviceInput});
}
// 注意：订阅一个对象，就是在生命周期结束前，要取消订阅。
ngOnDestroy() {
this.subscription.unsubscribe();
}思考： 这种发布订阅者模式适合全局状态管理吗？
三、可以通过本地缓存来实现通信（Cookie,LocalStorage、SessionStorage）
<!-- catch_namae_type.ts -->
// 目的是好维护
// 项目当中用到的页面缓存，需要在这里进行声明；key-value保持一致
// 声明规则，不同类型的缓存使用前缀 session_/ local_ / cookie_
// 动态设置缓存不用在这里声明，但是需要在key后面加'_noSetType_'标识
export const CatchNameType = {
session_userInfo: 'session_userInfo', // 用户信息
session_toekn: 'session_token', // token
local_loginInfo: 'local_loginInfo', // 本地缓存用户名密码
};
<!--catch.ts-->
import { Injectable } from '@angular/core';
// 定义这个类，主要是看全局定义了哪些本地缓存
import { CatchNameType } from './catch_namae_type';
// -------------------------------------------------------缓存工具类(三类方法)
// Cookie (方法有：set/get/remove)
// SStorage(sessionStorage) (方法有：set/get/remove/clear)
// LStorage(localStorage) (方法有：set/get/remove/clear)
@Injectable({
providedIn: 'root',
})
export class Catch {
// cookie
public static Cookie = {
/**
* cookie 存贮
* @param key 属性
* @param value 值
* @param String expire 过期时间,单位天
*/
set(key: string, value: any, expire: any): void {
if (Catch.is_set_catch_name_type(key)) {
const d = new Date();
d.setDate(d.getDate() + expire);
document.cookie = `${key}=${value};expires=${d.toDateString()}`;
}
},
get(key: string): string {
const cookieStr = unescape(document.cookie);
const arr = cookieStr.split('; ');
let cookieValue = '';
// tslint:disable-next-line: prefer-for-of
for (let i = 0; i < arr.length; i++) {
const temp = arr[i].split('=');
if (temp[0] === key) {
cookieValue = temp[1];
break;
}
}
return cookieValue;
},
remove(key: string): void {
document.cookie = `${encodeURIComponent(key)}=;expires=${new Date()}`;
},
};
// sessionStorage
public static SStorage = {
set(key: string, value: any): void {
if (Catch.is_set_catch_name_type(key)) {
sessionStorage.setItem(key, JSON.stringify(value));
}
},
get(key: string): any {
const jsonString =
sessionStorage.getItem(key) === 'undefined'
? undefined
: sessionStorage.getItem(key);
return jsonString ? JSON.parse(jsonString) : null;
},
remove(key: string): void {
sessionStorage.removeItem(key);
},
clear(): void {
sessionStorage.clear();
},
};
// localStorage
public static LStorage = {
set(key: string, value: any): void {
if (Catch.is_set_catch_name_type(key)) {
localStorage.setItem(key, JSON.stringify(value));
}
},
get(key: string): any {
const jsonString =
localStorage.getItem(key) === 'undefined'
? undefined
: localStorage.getItem(key);
return jsonString ? JSON.parse(jsonString) : null;
},
remove(key: string): void {
localStorage.removeItem(key);
},
clear(): void {
localStorage.clear();
},
};
// 设置缓存的时候是否在catch_name_type里面声明
static is_set_catch_name_type(key: string): boolean {
let allow = false;
// 对动态设置缓存不进行检查
if (key.indexOf('_noSetType_') !== -1) {
allow = true;
console.log('动态设置缓存', key);
return allow;
}
// 对命名规则进行检查
const nameRule =
key.indexOf('session_') !== -1 ||
key.indexOf('local_') !== -1 ||
key.indexOf('cookie_') !== -1;
if (!nameRule) {
allow = false;
console.log('命名规则错误', key);
return allow;
}
// 静态设置的缓存需要配置类型
Object.values(CatchNameType).forEach((item) => {
if (item === key) {
allow = true;
}
});
if (!allow) {
console.log('缓存操作失败，请检查配置缓存类型');
}
return allow;
}
}四、页面路由传参也可以实现单向通信
这部分内容，我会在路由章节整理。
组件通信总结
所以组件通信大概有如下几种：
1、父子组件通信（1、@Input() @output 2、本地变量#val 3、@viewChild()）
2、通过服务
3、页面缓存
4、页面级组件传参（两个页面等同于两个组件）
动态组件
组件的模板不会永远是固定的。应用可能会需要在运行期间按需加载一些新的组件。 通过下面的例子可以了解动态组件的基本使用
1、创建组件，被引入的组件
@Component({
template: `<span>hello world</span>`
})
export class DynamicComponent { }2、创建容器组件，用于加载动态组件
@Component({
selector: 'app-container',
template: `
<div #dynamicContainer></div>
<button (click)="createComponent()">Create</button>
`
})
export class AppContainerComponent {
// 声明容器
@ViewChild("dynamicContainer", { read: ViewContainerRef }) container: ViewContainerRef;
}在AppContainerComponent组件中，通过@ViewChild装饰器来获取视图中的模板元素，如果没有指定第二个查询参数，则默认返回 组件实例或相应的DOM元素，但这个示例中，我们需要获取ViewContainerRef实例也就是视图容器。可以在视图容器中创建、插入、删除组件等。
3、动态创建组件
在创建组件之前，需要注入ComponentFactoryResolver服务对象，该服务是动态加载组件的核心，可以将一个组件实例呈现到另一个 组件视图上。
- 使用ComponentFactoryResolve将已声明但未实例化的组件解析成为可以动态加载的component
//依赖组件类型获取对应的factory，从名字上可以看出该factory是用来初始化组件的 const componentFactory = this.ComponentFactoryResolver(DynamicComponent); //调用视图容器的createComponent方法并将组件添加到容器上。该方法内部会调用factory的create方法来初始化组件。 const modalContainerRef = this.container.createComponent(componentFactory);
4、为组件属性赋值
通过如下的方式为组件属性进行赋值
modalContainerRef.instance.property = ***;
5、销毁组件
在使用组件后，记得要销毁组件。
modalContainerRef.destroy();
6、组件注册
为了能够动态创建组件需要将组件在模块的entryComponents中声明。因为在entryComponents中声明的组件Angular都会创建一个 ComponentFactory并将其存储在ComponentFactoryResolver中，这是动态加载必需的步骤。
更多编程相关知识，请访问：编程入门！！
The above is the detailed content of Let's take a look at the related concepts of angular10 components in one article. For more information, please follow other related articles on the PHP Chinese website!
Related articles
See more- How to improve the performance of Angular applications using pipes?
- Let's briefly talk about Angular template engine ng-template
- Deep dive into HostBinding and HostListener decorators in Angular
- Let's talk about template input variables (let-variables) in Angular
- Let's talk about how to modify .css files to .scss files in Angular projects
- A brief discussion on how to add and use Font Awesome in Angular
- A brief discussion on the usage of @ViewChild in Angular