在 Angular 6 中,ng-init
指令已被弃用,因此不建议使用它来自动调用函数。相反,你可以使用 Angular 的组件生命周期钩子来实现这个功能。
以下是在 Angular 6 中自动调用函数的几种方法:
ngOnInit
生命周期钩子:在组件类中,你可以使用 ngOnInit
生命周期钩子来自动调用函数。ngOnInit
会在组件初始化时自动调用。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
constructor() { }
ngOnInit() {
this.myFunction();
}
myFunction() {
console.log('Function called automatically');
}
}
constructor
构造函数:如果你需要在组件创建时立即调用函数,可以将函数放在构造函数中。
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
constructor() {
this.myFunction();
}
myFunction() {
console.log('Function called automatically');
}
}
请注意,如果你的函数依赖于组件的输入属性或其他依赖项,那么在构造函数中调用可能会导致问题。在这种情况下,建议使用 ngOnInit
生命周期钩子。
@ViewChild
和 AfterViewInit
:如果你需要在视图初始化后自动调用函数,可以使用 @ViewChild
和 AfterViewInit
生命周期钩子。
import { Component, ViewChild, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements AfterViewInit {
@ViewChild('myElement') myElement;
constructor() { }
ngAfterViewInit() {
this.myFunction();
}
myFunction() {
console.log('Function called automatically');
}
}
在这个例子中,@ViewChild
用于获取视图中的元素,ngAfterViewInit
用于在视图初始化后调用函数。
领取专属 10元无门槛券
手把手带您无忧上云