如何从angular 9调用自定义组件

从 Angular 9 调用自定义组件可以通过以下步骤实现：

1. 首先，确保你已经创建了一个自定义组件。自定义组件可以通过使用 Angular CLI 的命令来生成，例如：ng generate component my-component。这将在项目中创建一个名为 my-component 的组件，并生成相应的组件文件。
2. 在需要调用自定义组件的模块中，导入自定义组件。可以在模块文件中使用 import 语句导入组件，例如：import { MyComponent } from './my-component.component';。
3. 在模块的 declarations 数组中将自定义组件添加为声明的一部分。这将告诉 Angular 该组件可以在模块中使用，例如：

@NgModule({
  declarations: [
    MyComponent
  ],
  // 其他模块配置...
})
export class AppModule { }

1. 在需要调用自定义组件的模板中，使用组件的选择器来调用它。在模板中使用组件的选择器标签，例如：<app-my-component></app-my-component>。
2. 如果需要向自定义组件传递数据，可以使用组件的属性绑定。在组件标签中使用方括号绑定属性，例如：<app-my-component [data]="myData"></app-my-component>。在自定义组件中，可以通过使用 @Input() 装饰器来接收传递的数据，例如：

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

@Component({
  selector: 'app-my-component',
  template: `
    <div>{{ data }}</div>
  `
})
export class MyComponent {
  @Input() data: any;
}

1. 如果需要从自定义组件中向父组件传递数据，可以使用事件绑定。在组件标签中使用圆括号绑定事件，例如：<app-my-component (customEvent)="handleEvent($event)"></app-my-component>。在自定义组件中，可以通过使用 @Output() 装饰器和 EventEmitter 类来触发事件，例如：

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="emitEvent()">Click me</button>
  `
})
export class MyComponent {
  @Output() customEvent = new EventEmitter();

  emitEvent() {
    this.customEvent.emit('Custom event data');
  }
}

以上是从 Angular 9 调用自定义组件的基本步骤。根据具体需求，你可以进一步探索 Angular 的各种功能和特性来优化和扩展你的自定义组件。如果你想了解更多关于 Angular 的信息，可以参考腾讯云的 Angular 相关产品和文档：

• Angular
• Angular CLI
• Angular 文档