概念理解一下Angular组件

组件负责控制屏幕上的一小块区域，我们称之为视图。 —— Angular官方定义

简单来说就是一段可复用html代码，比如标题栏，搜索框，表格……这些代码我们可能会经常用到，所以我们就把它们整片的粘来粘去，在Angular里面，它们就变成了一个组件

如果你需要这个组件，就在自己的网页引入这个组件，然后在html中写上<组件名></组件名>，这段html就贴过去了

上面简单的说了一下，组件负责控制屏幕上的一小块区域这个意思。

结合代码理解Angular组件

当然，第一次看Angular代码的时候还是有些茫然，知道它在说什么，但是没什么共鸣。

在我们在项目中用命令创建了一个组件之后，一般会为我们的组件创建一个文件夹，其中包括4个文件：html，css，spec.ts，component.ts，其中第1、2个已经很熟了，第3个是测试文件（暂时不用，以后会用），对于开始阶段而言，先关注第4个文件，在这个文件中，我们会对这一小块html代码进行操作。

import { Component } from '@angular/core';

//HTML代码 
@Component({
  selector: 'my-app',template: `<h1>{{title}}</h1> <h2>{{hero}} details!</h2> `
})

//对html的操作
export class AppComponent {
  title = 'Tour of Heroes';
  hero = 'Windstorm';
}

这段代码是官网上的，它都没有4个文件，就一个。
因为html代码比较短，就直接写在template后面，如果html和css很多，就单独建立文件，像标准的一个组件文件夹4个文件一样，写在相应的文件中，然后按路径引入就好

通过看这个例子，可以看出，这个组件中的操控的html片段就这么短：<h1>{{title}}</h1><h2>{{hero}} details!</h2>，一共两行，一个是题目，一个是英雄名字

但是他们是通过{ title = 'Tour of Heroes' ; hero = 'Windstorm';}这段代码对其赋值的，这个很像是asp网页一样，后面的cs文件对ASP页面的某些值赋值

通过这个简单的demo就可以看出，组件就是这样操作html的，基本的html和css写好，其中关键的需要变动的字段，在component文件中操作

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!