angular10组件的示例分析

这篇文章主要介绍了angular10组件的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

公司主营业务：成都网站制作、成都做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出沾益免费做网站回馈大家。

组件构成要素

• html模板

• typescript，定义行为

• css组，可以引入多个css文件，因此可以在一个组件里面定义多个css文件

//从angular主模块中引入Component(组件装饰器或组件注解)
import { Component } from '@angular/core';

//装饰器中以json的形式声明元数据
@Component({
  //它指定了一个叫  的元素。 该元素是 index.html 文件里的一个占位符
  //为什么这个组件跟入口index建立了联系呢？因为入口main.ts中绑定了主模块为appModule
  selector: 'app-root',   //在模板中找对应的标签，找到后创建并插入该组件实例
  templateUrl: './app.component.html',  // html模板
  styleUrls: ['./app.component.css'],   // css样式，可以引入多个css文件
  // 这个属性（内联模板）和templateUrl（外联模板）二选一，template后面可以直接跟html字符串
  // 注意在模板语法（反引号）中是使用插值表达式，不能使用${}插入值
  template: `
{{title}}
`   
})
//组件控制器，写逻辑代码的地方
export class AppComponent {
  title = 'myAngular';
  //构造函数可以用来进行属性的声明和初始化语句
  //在angular里面有个特别重要的点要记住：只能通过构造函数注入依赖
  constructor() {}
}

先决条件

• 安装 Angular CLI （npm install -g @angular/cli）

• 建立一个 Angular 项目 (ng new )

如果不满足这两个条件，请参考 搭建环境。

如何创建一个组件

使用 Angular CLI 创建一个组件

ng generate component  // 创建一个组件

ng g c  // 缩写

常用的创建组件的一些其他选项

ng g c   --skip-tests // 创建一个组件，且不用安装测试文件

ng g c  --inline-style // 缩写-s，内联样式

ng g c  --inline-template // 缩写-t，内联模板

ng g c  --module=  // 指定创建的组件在哪个模块引用，在多个模块的项目中会用到

除了通过angular cli自动生成组件外，也可以手动创建组件（不推荐），这里不介绍。

组件的生命周期（高阶内容，掌握ngOnInit、ngOnDestroy、ngOnChanges、ngAfterViewInit()）

在工作中经常能够用到的生命周期就两个（ngOninit和ngOnDestroy），其他的生命周期很少用到；但是如果能够掌握组件的生命周期，对angular会掌握的得更加深刻。

生命周期含义

当 Angular 实例化组件类并渲染组件视图及其子视图时，组件实例的生命周期就开始了。生命周期一直伴随着变更检测，Angular 会检查数据绑定属性何时发生变化，并按需更新视图和组件实例。当 Angular 销毁组件实例并从 DOM 中移除它渲染的模板时，生命周期就结束了。当 Angular 在执行过程中创建、更新和销毁实例时，指令就有了类似的生命周期。

应用：

你的应用可以使用生命周期钩子方法来触发组件或指令生命周期中的关键事件，以初始化新实例，需要时启动变更检测，在变更检测过程中响应更新，并在删除实例之前进行清理。

如何实现生命周期事件

每个组件或指令都可以实现一个或多个生命周期钩子，这些生命周期钩子可以在适当的时候对组件或指令实例进行操作。

每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上 ng 前缀构成的。比如，OnInit 接口的钩子方法叫做 ngOnInit()。如果你在组件或指令类中实现了这个方法，Angular 就会在首次检查完组件或指令的输入属性后，紧接着调用它

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

@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.css'],  
  template: `
{{title}}
`   
})
// 实现OnInit生命周期，可以实现多个生命周期
export class AppComponent implements OnInit{ 
  title = 'myAngular';
  constructor() {}
  ngOnInit(){
      console.log("Angular在首次检查完组件的输入属性后，然后调用它，只调用一次")
  }
}

生命周期概览

重点生命周期详解

初始化组件和指令 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: `
    
  `
})
export class ParentComponent {
  msg = '父组件传的值';
}

2、子组件通过@Input接收数据

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

@Component({
  selector: 'app-child',
  template: `
    
{{msg}}
  `
})
export class ChildComponent {
  @Input() msg: String;
}

子传父

1、子组件通过自定义事件，向父组件发送数据

import { Component, Input, EventEmitter, Output} from '@angular/core';
,
@Component({
  selector: 'app-child',
  template: `
    
{{msg}}
    发送
  `
})
export class ChildComponent {
  @Input() msg: String;
  @Output() voted = new EventEmitter();
  
  vote() {
    this.voted.emit("子组件传的值");
  }
}

2、父组件通过监听自定义事件，接收子组件的传值

import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    
  `
})
export class ParentComponent {
  msg = '父组件传的值';
  voted(val){ //监听自定义事件的传值
      console.log(val)
  }
}

子组件怎么监听输入属性值的变化？（2种方法）

1、可以使用一个输入属性@Input()的 setter，以拦截父组件中值的变化。

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

@Component({
  selector: 'app-child',
  template: '
"{{name}}"
'
})
export class ChildComponent {
  @Input()
  get name(): string { return this._name; }
  set name(name: string) {
    this._name = (name && name.trim()) || '';
  }
  private _name = '';
}

2、通过ngOnChange()来截听输入属性值的变化

当需要监视多个、交互式输入属性的时候，本方法比用属性的 setter 更合适。

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

@Component({
  selector: 'app-version-child',
  template: `
    
Version {{major}}.{{minor}}
    
Change log:
    

      {{change}}
    
  `
})
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: `
  
Countdown to Liftoff (via local variable)
  Start //调用子组件方法
  Stop
  {{timer.seconds}}