我知道在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)
我确定答案非常简单,但我在找到答案时遇到了很多麻烦.
先感谢您!
在 Angular 2+ 中,ngDoCheck和ngAfterViewChecked似乎执行相同的功能。
ngDoCheck据说只要触发更改检测就会调用。现在,此更改检测将随着视图中的更改而触发。根据文档,ngAfterViewChecked每当视图更改时都会调用。
当一个生命周期钩子就足够了时,这里还需要两个生命周期钩子吗?
这里多次调用测试方法中的语句.为什么会这样?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) 我必须在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事件中被调用.
我有一个组件,它从两个或三个 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
HomeComponent
ngOnInit()
{
console.log('loaded');
this.retrieveData();
}
retrieveData()
{
// this.dataService.getData().subscribe(...);
}
Run Code Online (Sandbox Code Playgroud)
组件加载时,我正在检索数据。routerLink例如,当用户单击另一个,SettingsComponent然后返回时HomeComponent,当然会再次调用该函数,因为该组件已再次加载。但是,每当我返回该组件时,它都会再次调用该函数,这会创建太多不需要的HTTP请求。我需要防止这种情况,并确保仅在第一次调用该函数。我该怎么做呢?我应该使用其他组件生命周期挂钩吗?
我有一个子组件,在其父组件中使用了两次,它使用 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)