1. 创建特性组件：
在 src/app 目录下创建一个文件夹，比如 feature-components，然后在该文件夹中创建你的特性组件，比如 feature-component。
// src/app/feature-components/feature-component.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-feature-component',
template: `
<div>
<h3>{{ title }}</h3>
<!-- Add your feature component content here -->
</div>
`,
styles: [`
/* Add your component styles here */
`],
})
export class FeatureComponent {
@Input() title: string = '';
}
2. 在需要使用特性组件的地方导入并使用它：
在你的其他组件中，导入并使用 app-feature-component。
// src/app/other-component/other-component.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-other-component',
template: `
<h2>Other Component</h2>
<app-feature-component title="Special Feature"></app-feature-component>
`,
styles: [],
})
export class OtherComponent {}
3. 在模块中声明特性组件：
在你的模块中（通常是 app.module.ts）导入并声明特性组件。
// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FeatureComponent } from './feature-components/feature-component.component';
import { OtherComponent } from './other-component/other-component.component';
@NgModule({
declarations: [FeatureComponent, OtherComponent],
imports: [BrowserModule],
bootstrap: [OtherComponent],
})
export class AppModule {}
4. 运行应用：
在命令行中运行 ng serve，然后在浏览器中打开 http://localhost:4200/，你应该能够看到包含你的特性组件的页面。
这是一个简单的例子，帮助你在 Angular 中创建和使用特性组件。特性组件可以帮助你更好地组织和重用你的代码，使其更易维护和可扩展。
转载请注明出处：http://www.zyzy.cn/article/detail/5023/Angular