目录
声明: angularAPI学习generate
组件创建
- 命令创建
ng generate component
ng g component <component-name>
用于构建angular组件 会自动创建 html模板、style文件、组件文件以及单元测试文件
2. 手动创建 新建 component-name.component.ts
手动创建的组件需要在 app.model.ts 文件中的 *** declarations*** 注册
<app-home></app-home> <app-my></app-my>
- 1 内部组件
import { Component, OnInit } from "@angular/core";
@Component({
selector: 'app-my',
template: '<p>my works!</p>',
styles: ['p { color: pink; }']
})
export class MyComponent implements OnInit {
constructor () { }
ngOnInit(): void {
}
}
- 2 外部组件
component.ts
import { Component, OnInit } from "@angular/core"; @Component({ selector: 'app-my', templateUrl: './my.component.html', styleUrls: ['./my.component.less'] }) export class MyComponent implements OnInit { constructor () { } ngOnInit(): void { } }
component.html
<p>my works!</p>
component.less
p { color: pink; }