Component 组件

web component标准:

自定义元素
模板
Shadow DOM
Html 导入

Angular组件

所有的Angular组件都可以独立存在
任何Angular组件都可以作为根组件被引导、路由加载、在其他组件中使用
组件不能被单独启动，必须包装到模块(NgModule)中,通过Bootstrap模块接口引导入口模块启动Angular应用
组件是Angular最小逻辑单元，模块是组件的抽象

创建Angular组件：

从 @angular/core 中引入 Component 装饰器
建立一个普通类，并用 @Component 修饰它
在 @Component 中，设置 selector 自定义标签和 template 模板
```
    //1
    import { Component } from 'angular/core';

    //2
    @Component({
        //3
        selector: 'contact-item',
        template:`
            <div><p>dadada</p></div>
        `
    })
```
以上代码创建了一个简单的angular组件，通过在html中添加<contact-item>自定义标签的方式使用组件

组件的基础构成

组件装饰器(Decorator) 每个组件必须使用@Component进行修饰，才能成为angular组件

@Component是TS语法，如果移除@Component，就不是一个组件
组件元数据(Metadata) selector、template、templateUrl等

selector
组件的命名标记，默认为 div
命名：小写字母，'-'分隔符

template
组件的内联模板
多行模板使用'`'分隔符

templateUrls
外部模板
每个组件只能定义一个模板
推荐使用templateUrl，特别是长模板
```
    @Component({
        template:'app/components/templateName.html'
    })
```
styles
组件的内联样式
@Component({ styles:[ ` p {color:red;} ` ] })
styleUrls
组件的外联样式
styles 和 styleUrls 可以同时指定，style 优先级更高
```
    @Component({
        styles:['app/list/item.component.css']            
    })
```
模板(template) 每个组件都会关联一个模板，此模板最终会渲染到页面上，页面上的DOM元素就是此组件实例的寄宿元素

每个组件都必须设置一个模板, angular 才能将组件内容渲染到 DOM 上，此 DOM 叫 宿主元素

组件可以与宿主元素交互，组件的交互形式包括:

显示数据
使用插值语法 {{}}} 显示组件数据
import { Component } from ' @angular/core '; @Component({ selector:'contact-item', template:` <div>{{name}}</div> <div>{{phone}}</div> ` }) export class ContactItemComponet{ name :"name"; phone:"12456"; }

双向数据绑定
import { Component } from '@angular/core'; @Component({ selector:'contact-item', template:` <input type="text" value="{{name}}" [(ngModel)]="name"/> <p>{{name}}</p> ` styles:[``] }) export class ContactItemComponent{ //... } //当输入框内容发生改变时，Angular的双向绑定机制会将输入内容同步更新到name属性上，并同步显示到p标签上
监听数组元素事件以及调用组件方法
通过(eventName)方式响应UI事件
一般调用组件方法和事件监听一起使用
<h3 (click)="addContact()"></h3>
组件类 组件的逻辑都在组件内部定义并实现

Angular Component

Component 组件

web component标准:

Angular组件

创建Angular组件：

组件的基础构成

猜你喜欢