要创建一个本地的Angular集合,您可以按照以下步骤操作:
创建一个新的Angular项目:
ng new my-collection
进入项目目录:
cd my-collection
创建一个新的Angular库:
ng generate library my-lib
进入库目录:
cd projects/my-lib
创建一个新的Angular组件:
ng generate component my-component
在my-component.component.ts
文件中添加一些示例代码,例如:
import { Component } from '@angular/core';
@Component({
selector: 'lib-my-component',
template: `
Hello, Angular Collection!
This is a sample component from the local Angular collection.
`,
styles: []
})
export class MyComponentComponent { }
返回到项目根目录:
cd ../../
在src/app
目录下创建一个使用该组件的示例组件:
ng generate component my-example
在my-example.component.html
文件中使用my-component
组件:
My Example Component
在app.module.ts
文件中引入和声明my-lib
库:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyLibModule } from 'projects/my-lib/src/public-api';
import { AppComponent } from './app.component';
import { MyExampleComponent } from './my-example/my-example.component';
@NgModule({
declarations: [
AppComponent,
MyExampleComponent
],
imports: [
BrowserModule,
MyLibModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
运行应用程序:
ng serve
现在,您可以在浏览器中查看本地Angular集合的示例页面,并验证my-component
组件是否正常显示。