在Angular中,每个组件实例都有自己独立的函数。当使用组件时,每个组件实例都会执行其相应的函数。
下面是一个示例,展示了一个Angular组件及其函数的执行情况:
my-component
。import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template: 'Hello World!
'
})
export class MyComponent {
constructor() {
console.log('Constructor executed for MyComponent');
}
ngOnInit() {
console.log('ngOnInit executed for MyComponent');
}
}
MyComponent
添加到另一个组件中,命名为app-component
。import { Component } from '@angular/core';
@Component({
selector: 'app-component',
template: ' '
})
export class AppComponent {
constructor() {
console.log('Constructor executed for AppComponent');
}
ngOnInit() {
console.log('ngOnInit executed for AppComponent');
}
}
AppComponent
。import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyComponent } from './my.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, MyComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
在浏览器中运行应用后,可以在控制台中看到以下输出:
Constructor executed for AppComponent
ngOnInit executed for AppComponent
Constructor executed for MyComponent
ngOnInit executed for MyComponent
从输出可以看出,每个组件实例的构造函数和ngOnInit
函数都会被执行。
因此,每个组件实例的函数都会为每个组件实例执行。