本篇文章给大家介绍了angular开发实践（三）：剖析angular component，有感兴趣的小伙伴可以看一下

Web Component

在介绍Angular Component之前，我们先简单了解下W3C Web Components

定义

• W3C为统一组件化标准方式，提出Web Component的标准。

• 每个组件包含自己的html、css、js代码。

• Web Component标准包括以下四个重要的概念：

1. Custom Elements（自定义标签）：可以创建自定义 HTML 标记和元素；

2. HTML Templates（HTML模版）：使用 标签去预定义一些内容，但并不加载至页面，而是使用 JS 代码去初始化它；

3. Shadow DOM（虚拟DOM）：可以创建完全独立与其他元素的DOM子树；

4. HTML Imports（HTML导入）：一种在 HTML 文档中引入其他 HTML 文档的方法，。

概括来说就是，可以创建自定义标签来引入组件是前端组件化的基础，在页面引用 HTML 文件和 HTML 模板是用于支撑编写组件视图和组件资源管理，而 Shadow DOM 则是隔离组件间代码的冲突和影响。

示例

定义hello-component

使用hello-component

从以上代码可看到，hello.html 为按标准定义的组件（名称为 hello-component ），在这个组件中有自己的结构、样式及逻辑，然后在 index.html 中引入该组件文件，即可像普通标签一样使用。

Angular Component

Angular Component属于指令的一种，可以理解为拥有模板的指令。其它两种是属性型指令和结构型指令。

基本组成

@Component({
    selector: 'demo-component',
    template: 'Demo Component'
})
export class DemoComponent {}

• 组件装饰器：每个组件类必须用@component进行装饰才能成为Angular组件。

• 组件元数据：组件元数据：selector、template等，下文将着重讲解每个元数据的含义。

• 组件类：组件实际上也是一个普通的类，组件的逻辑都在组件类里定义并实现。

• 组件模板：每个组件都会关联一个模板，这个模板最终会渲染到页面上，页面上这个DOM元素就是此组件实例的宿主元素。

组件元数据

自身元数据属性

从 core/Directive 继承

几种元数据详解

以下几种元数据的等价写法会比元数据设置更简洁易懂，所以一般推荐的是等价写法。

inputs

@Component({
    selector: 'demo-component',
    inputs: ['param']
})
export class DemoComponent {
    param: any;
}

等价于：

绘蛙

电商场景的AI创作平台，无需高薪聘请商拍和文案团队，使用绘蛙即可低成本、批量创作优质的商拍图、种草文案

下载

@Component({
    selector: 'demo-component'
})
export class DemoComponent {
    @Input() param: any;
}

outputs

@Component({
    selector: 'demo-component',
    outputs: ['ready']
})
export class DemoComponent {
    ready = new eventEmitter();
}

等价于：

@Component({
    selector: 'demo-component'
})
export class DemoComponent {
    @Output() ready = new eventEmitter();
}

host

@Component({
    selector: 'demo-component',
    host: {
        '(click)': 'onClick($event.target)', // 事件
        'role': 'nav', // 属性
        '[class.pressed]': 'isPressed', // 类
    }
})
export class DemoComponent {
    isPressed: boolean = true;

    onClick(elem: HTMLElement) {
        console.log(elem);
    }
}

等价于：

@Component({
    selector: 'demo-component'
})
export class DemoComponent {
    @HostBinding('attr.role') role = 'nav';
    @HostBinding('class.pressed') isPressed: boolean = true;

    @HostListener('click', ['$event.target'])
    onClick(elem: HTMLElement) {
        console.log(elem);
    }
}

queries - 视图查询

@Component({
    selector: 'demo-component',
    template: `
        
        
Demo Component
    `,
    queries: {
        theInput: new ViewChild('theInput')
    }
})
export class DemoComponent {
    theInput: ElementRef;
}

等价于：

@Component({
    selector: 'demo-component',
    template: `
        
        
Demo Component
    `
})
export class DemoComponent {
    @ViewChild('theInput') theInput: ElementRef;
}

queries - 内容查询

    
{{item}}

@Directive({
    selector: 'li'
})
export class ListItem {}

@Component({
    selector: 'my-list',
    template: `
        

            
        
    `,
    queries: {
        items: new ContentChild(ListItem)
    }
})
export class MyListComponent {
    items: QueryList;
}

等价于：

@Component({
    selector: 'my-list',
    template: `
        

            
        
    `
})
export class MyListComponent {
    @ContentChild(ListItem) items: QueryList;
}

styleUrls、styles

• styleUrls和styles允许同时指定。

• 优先级：模板内联样式 > styleUrls > styles。

• 建议：使用styleUrls引用外部样式表文件，这样代码结构相比styles更清晰、更易于管理。同理，模板推荐使用templateUrl引用模板文件。

changeDetection

• ChangeDetectionStrategy.Default：组件的每次变化监测都会检查其内部的所有数据（引用对象也会深度遍历），以此得到前后的数据变化。

• ChangeDetectionStrategy.OnPush：组件的变化监测只检查输入属性（即@Input修饰的变量）的值是否发生变化，当这个值为引用类型（Object，Array等）时，则只对比该值的引用。

• 显然，OnPush策略相比Default降低了变化监测的复杂度，很好地提升了变化监测的性能。如果组件的更新只依赖输入属性的值，那么在该组件上使用OnPush策略是一个很好的选择。

encapsulation

• ViewEncapsulation.None：无 Shadow DOM，并且也无样式包装。

• ViewEncapsulation.Emulated：无 Shadow DOM，但是通过Angular提供的样式包装机制来模拟组件的独立性，使得组件的样式不受外部影响，这是Angular的默认设置。

• ViewEncapsulation.Native：使用原生的 Shadow DOM 特性。

生命周期

当Angular使用构造函数新建组件后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法：

相关推荐：

Angular开发实践（一）：环境准备及框架搭建

Angular开发实践（二）：HRM运行机制