组件

组件

组件控制屏幕上被称为视图的一小片区域。

组件由业务逻辑(.ts)、页面模板(.html)、样式(.css/.less等)组成

angular创建组件后会自动更新，不需要重启项目

根组件

app.component.html
app.component.ts
app.component.css

创建组件

使用angular的命令创建组件，参考链接：https://cli.angular.io/

cd test01
# 在src/app文件夹中生成一个components文件夹，在该文件夹下创建一个news组件，并自动在根组件app.module.ts中引入该组件
ng generate component components/news
# 或者简写为
ng g component components/news

创建的组件中包含4个文件：

xxx.component.css 样式文件（如果选了sass/scss/less等预编译，会生成相对应的样式文件）
xxx.component.html 渲染的html模板
xxx.component.ts 组件typescript文件
xxx.component.spec.ts 测试用的ts文件，可删除

其中，xxx.component.ts文件内容如下：(以search组件的search.component.ts为例)

// 从angular核心库中导入Component符号
import { Component, OnInit } from '@angular/core';
// 组件装饰器，声明下面的类为一个组件
@Component({
  selector: 'app-search',  // 是一个css选择器，一旦模板HTML中找到这个选择器对应的标签，就创建并插入该组件的一个实例的视图。即其他组件html渲染时引入该组件视图的标签名
  templateUrl: './search.component.html', // 该组件的html模板文件相对于这个组件文件的地址。还可以用template属性的值来提供内联的html模板。这个模板定义了该组件的宿主视图
  styleUrls: ['./search.component.css']
    // providers:[HeroService] ，当前组件所需的服务的一个数组。
})
export class SearchComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
  }
}

引入组件

如果是通过命令创建的组件，创建的组件会自动被进行引入到根模块app.module.ts中。

如果是手工创建的组件，使用时需要引入到app.module.ts中

// 在根模块app.module.ts的头部使用import引入创建的模块
import { NewsComponent } from './components/news/news.component';
// 在根模块app.module.ts中，@NgModule的declarations中加入该组件
@NgModule({
    declarations: [
        AppComponent, NewsComponent
    ],
    // ....
})

调用组件

如果需要在其他组件中调用刚刚创建的新闻组件，则在组件的html中需要引用的位置加入组件名称标签

<!-- news.component.ts文件中的@Component装饰器的selector的值 -->
<app-news></app-news>

可以通过组件扩展html的标签

前端笔记

04-组件

组件

根组件

创建组件

引入组件

调用组件