标签: lifecycle-hook

如何为Angular2组件实现多个生命周期钩子?

我知道在Angular2中定义组件时,您可以实现多种类型的生命周期钩子,例如OnDestroy,NgOnInit等.

在我在网上看到的关于使用这些钩子的每个代码片段中,我只看到它们一次被使用一个.例如

export class ModalComponent implements OnDestroy { ... }
Run Code Online (Sandbox Code Playgroud)

要么

export class ModalComponent implements OnChanges { ... } 
Run Code Online (Sandbox Code Playgroud)

但是如果你想为一个组件使用多个呢?例如,如果您想要OnChanges和OnDestroy的特定行为,该怎么办?我尝试过以下方法:

export class ModalComponent implements OnChanges implements OnDestroy{ ... } 
export class ModalComponent implements OnChanges, OnDestroy { ... } 
export class ModalComponent implements [OnChanges, OnDestroy] { ... } 
export class ModalComponent implements OnChanges and OnDestroy { ... } 
Run Code Online (Sandbox Code Playgroud)

我确定答案非常简单,但我在找到答案时遇到了很多麻烦.

先感谢您!

lifecycle-hook angular

20
推荐指数
2
解决办法
2万
查看次数

Angular 4:ngDoCheck 与 ngAfterViewChecked 之间的区别

在 Angular 2+ 中,ngDoCheckngAfterViewChecked似乎执行相同的功能。 ngDoCheck据说只要触发更改检测就会调用。现在,此更改检测将随着视图中的更改而触发。根据文档,ngAfterViewChecked每当视图更改时都会调用。

当一个生命周期钩子就足够了时,这里还需要两个生命周期钩子吗?

lifecycle-hook angular

5
推荐指数
1
解决办法
8900
查看次数

模板中的{{call()}}多次执行方法块?

这里多次调用测试方法中的语句.为什么会这样?DOM是由AngularJS2多次重建的吗?

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

@Component({
  selector: 'my-app',
  template: `<div>Method Call {{test()}}</div>>`
})

export class AppComponent { 
    name = 'Angular';
    test() {
       console.log("Test is called");
    }
}
Run Code Online (Sandbox Code Playgroud)

lifecycle-hook angular

4
推荐指数
1
解决办法
1590
查看次数

在EC2终止上调用脚本

我必须在AWS自动缩放扩展事件期间采取某些操作.ec2实例应该能够将一些日志和报告保存到S3存储桶.这可能需要5至15分钟.

我已经有一个在终止时调用的脚本:

ln -s /etc/ec2-termination /etc/rc0.d/S01ec2-termination

然而,剧本在5分钟内突然结束.我正在考虑利用AWS LifeCycle钩子来延长EC2的使用寿命.关于以类似于用户数据脚本的方式调用脚本的文档并不清楚.

有一些方法可以使用AWS lambda或SNS来接收通知.这可以用于通知ec2.

但是,我想知道是否有一个更简单的解决方案来解决这个问题.有没有办法用Lifecycle钩子注册一个脚本,这个钩子在一个scale-in事件中被调用.

amazon-ec2 amazon-web-services lifecycle-hook

2
推荐指数
3
解决办法
4114
查看次数

React 在 componentDidUpdate 中获取新数据

我有一个组件,它从两个或三个 API 接收新闻列表。组件第一次渲染时,将调用 api 并以componentDidMount 如下方式渲染数据:

componentDidMount() {
        this.state.platforms.forEach((platform, i) => {
            let objToSend = {
                phrase: this.props.searchParams.phrase,
                // this is the main place when input data changes
                ...this.props.searchParams.general_params,
                ...this.props.searchParams.platforms[i].api_params,
                stringPath: platform,
                apiPath: this.props.searchParams.platforms[i].apiPath,
            }
            this.props.loadData(objToSend)
            // this is the api call using redux which sends data as props to this component
 }
Run Code Online (Sandbox Code Playgroud)

new 当短语更改时,我希望此组件重新渲染并重新运行 componentDidMount,但它不起作用,因为 componentDidMount 将运行一次。所以我使用了componentDidUpdate,但是由于有很多调用,所以api正在不断更新。

每次更改短语时,如何使组件重新渲染并重新运行 componentDidMount

components render reactjs lifecycle-hook

2
推荐指数
1
解决办法
9002
查看次数

我如何只在ngOnInit()上运行一个函数,而不是从另一个routerLink返回时再次运行?

HomeComponent

ngOnInit()
{
    console.log('loaded');
    this.retrieveData();
}

retrieveData()
{
    // this.dataService.getData().subscribe(...);
}
Run Code Online (Sandbox Code Playgroud)

组件加载时,我正在检索数据。routerLink例如,当用户单击另一个,SettingsComponent然后返回时HomeComponent,当然会再次调用该函数,因为该组件已再次加载。但是,每当我返回该组件时,它都会再次调用该函数,这会创建太多不需要的HTTP请求。我需要防止这种情况,并确保仅在第一次调用该函数。我该怎么做呢?我应该使用其他组件生命周期挂钩吗?

lifecycle-hook ngoninit angular

1
推荐指数
1
解决办法
4980
查看次数

模板变量始终未定义 ngOnChanges

我有一个子组件,在其父组件中使用了两次,它使用 ngOnChaages 来更新值;

这一切都工作得很好,但现在我正在尝试根据通过@Input变量传递给它的信息来操作子模板。

我发现的是;当父组件首次加载时,模板变量在函数调用中未定义

这是有道理的,因为该函数是在onChanges方法内调用的,并且没有给模板足够的时间来加载。

我需要重构我的代码,但是如何重构呢?

目前,如果我使用它就可以了setTimeout

所以简单来说:

@ViewChild('myContainer', {read: ElementRef}) myContainer: ElementRef;
@Input() myUpdatingVar

ngOnChanges(): void {
  if (this.myUpdatingVar === someValue) {
      this.myFunc(this.someValue1);
   } else {
      this.myFunc(this.someValue2);
   }
}

myFunc(param){
   do stuff....
   this.updateDom(anotherParam);
}

updateDom(param) {
// If I use setTimeout this works
this.myContainer.nativeElement.querySelector(`#someId`); // Undefined
}
Run Code Online (Sandbox Code Playgroud)

javascript angular-template lifecycle-hook angular

1
推荐指数
1
解决办法
5831
查看次数