要解决在Angular 7中包含组件的问题,您可以按照以下步骤操作:
创建一个可复用的组件:首先,创建一个可复用的组件,例如my-component
。您可以使用Angular CLI命令ng generate component my-component
来生成一个新的组件。
my-component.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
My Component
Hello, World!
`,
styles: []
})
export class MyComponentComponent {}
导入并使用组件:要在其他组件中使用my-component
,您需要将其导入并将其添加到您想要包含组件的组件中。
app.component.ts:
import { Component } from '@angular/core';
import { MyComponentComponent } from './my-component.component';
@Component({
selector: 'app-root',
template: `
App Component
`,
styles: []
})
export class AppComponent {}
在app.component.html
中,您也可以使用
标签来包含组件。
将组件添加到模块中:为了使Angular能够识别和使用my-component
组件,您需要将其添加到您的模块中的declarations
数组中。
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyComponentComponent } from './my-component.component';
@NgModule({
declarations: [
AppComponent,
MyComponentComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
现在,您可以在任何需要的组件中使用
标签来包含和显示my-component
组件。
以上是在Angular 7中包含组件的解决方法。通过这种方式,您可以将可复用的组件添加到其他组件中,并在应用程序中使用它们。