agular6组建之间监听@Input传值变化

原创于 2019-04-02 11:33:30 发布 · 815 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

54 篇文章

订阅专栏

angular

26 篇文章

订阅专栏

本文详细介绍了 Angular 中 OnChanges 接口的使用方法及其在组件生命周期中的作用。通过实例展示了如何利用 ngOnChanges 方法来响应输入属性的变化，并实现定时关闭提示框的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.引入OnChanges

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

2.继承接口

export class AlertComponent implements OnInit, OnChanges {

}

3.声明ngOnChanges

ngOnChanges() {
   
}

4.整体代码

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

@Component({
  selector: 'app-alert',
  templateUrl: './alert.component.html',
  styleUrls: ['./alert.component.css']
})
export class AlertComponent implements OnInit, OnChanges {
  @Input() showPop: boolean;
  @Input() showTips: any;

  constructor() {

  }

  ngOnInit() {

  }

  ngOnChanges() {
    if (this.showPop) {
      var that = this
      window.setTimeout(function () {
        that.showPop = false;
        that.showTips = ""
      }, 2000);
    }
  }
}