要查找Angular中的子组件名称,可以使用以下方法:
在父组件的模板中,给子组件添加一个模板引用变量,例如:
然后在父组件的类中,使用ViewChild装饰器获取子组件的引用,并访问其名称属性,例如:
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
template: `
`,
})
export class ParentComponent implements AfterViewInit {
@ViewChild('childComponent') childComponent: ChildComponent;
ngAfterViewInit() {
console.log(this.childComponent.name);
}
}
如果有多个子组件,可以使用ViewChildren装饰器和QueryList来获取子组件列表,并访问每个子组件的名称属性,例如:
import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
template: `
`,
})
export class ParentComponent implements AfterViewInit {
@ViewChildren(ChildComponent) childComponents: QueryList;
ngAfterViewInit() {
this.childComponents.forEach(childComponent => {
console.log(childComponent.name);
});
}
}
请注意,以上示例假设子组件具有一个名为"name"的属性,你可以根据实际情况调整属性名称。