AngularCliApi之组件

声明： angularAPI学习generate

组件创建

1. 命令创建

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; }