Angular 개발 실습(3): Angular 구성 요소 분석

이 글에서는 Angular 개발 실습을 소개합니다(3): Angular Component 분석, 관심 있는 친구들은 살펴보세요

Web Component

Angular Component를 소개하기 전에 W3C Web Components

정의

• W3C는 통일된 컴포넌트 표준방법을 제시하고 Web Component의 표준을 제안합니다.

• 각 구성 요소에는 고유한 html, css 및 js 코드가 포함되어 있습니다.

• 웹 구성 요소 표준에는 다음과 같은 네 가지 중요한 개념이 포함됩니다.

1. 사용자 정의 요소(사용자 정의 태그): 사용자 정의 HTML 태그 및 요소를 생성할 수 있습니다.

2. HTML 템플릿(HTML 템플릿): d477f9ce7bf77f53fbcf36bec1b69b7a 태그를 사용하여 일부 콘텐츠를 미리 정의하지만 페이지에 로드하지는 않지만 JS 코드를 사용하여 초기화합니다. d477f9ce7bf77f53fbcf36bec1b69b7a 标签去预定义一些内容，但并不加载至页面，而是使用 JS 代码去初始化它；

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

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

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

示例

定义hello-component

ace7e77f2498c1458eb57174a6a7ebca
    c9ccee2e6ea535a969eb3f532ad9fe89
        h1 {
            color: red;
        }
    531ac245ce3e4fe3d50054a55f265927
    4a249f0d628e2318394fd9b75b4636b1Hello Web Component!473f0a7621bec819994bb5020d29372a
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a

    // 指向导入文档，即本例的index.html
    var indexDoc = document;

    // 指向被导入文档，即当前文档hello.html
    var helloDoc = (indexDoc._currentScript || indexDoc.currentScript).ownerDocument;

    // 获得上面的模板
    var tmpl = helloDoc.querySelector('#hello-template');

    // 创建一个新元素的原型，继承自HTMLElement
    var HelloProto = Object.create(HTMLElement.prototype);

    // 设置 Shadow DOM 并将模板的内容克隆进去
    HelloProto.createdCallback = function() {
        var root = this.createShadowRoot();
        root.appendChild(indexDoc.importNode(tmpl.content, true));
    };

    // 注册新元素
    var hello = indexDoc.registerElement('hello-component', {
        prototype: HelloProto
    });
2cacc6d41bbb37262a98f745aa00fbf0

使用hello-component

76c82f278ac045591c9159d381de2c57
e50fd76c890a16356472f13b52f09dcd
93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    2d6a9a80839a79274bb3670372fe8e88
    ed4d26c083a9614f46d7798d397a9957
    3e4a60385cd2bac091594bf69413e183
    b2386ffb911b14667cb8f0f91ea547a7Web Component6e916e0f7d1e588d4f442bf645aedb2f
    900eaee332ffe5616b172057b4fe44c6
    8540371773d08d87304e51f46eb14716
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    9e5e4ca5ccb2d201b6d8d3a27a9f6c29
    ac30bb40e2b1e4a43896fdde37fc95229167cfb7a9013c07aa3af04f1da7e239
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

从以上代码可看到，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元素就是此组件实例的宿主元素。

组件元数据

自身元数据属性

Shadow DOM(Virtual DOM): 완전히 독립적이고 다른 요소의 DOM 하위 트리

名称	类型	作用
animations	AnimationEntryMetadata[]	设置组件的动画
changeDetection	ChangeDetectionStrategy	设置组件的变化监测策略
encapsulation	ViewEncapsulation	设置组件的视图包装选项
entryComponents	any[]	设置将被动态插入到该组件视图中的组件列表
interpolation	[string, string]	自定义组件的插值标记，默认是双大括号{{}}
moduleId	string	设置该组件在 ES/CommonJS 规范下的模块id，它被用于解析模板样式的相对路径
styleUrls	string[]	设置组件引用的外部样式文件
styles	string[]	设置组件使用的内联样式
template	string	设置组件的内联模板
templateUrl	string	设置组件模板所在路径
viewProviders	Provider[]

🎜HTML 가져오기: 다른 HTML 문서를 HTML 문서에 도입하는 방법, d32751092f26f778a78529418c126f84. 🎜🎜🎜요약하자면, 구성 요소를 소개하는 사용자 정의 태그를 생성하는 기능은 프런트 엔드 구성 요소화의 기초입니다. 페이지의 HTML 파일 및 HTML 템플릿에 대한 참조는 구성 요소 뷰 작성 및 구성 요소 리소스 관리를 지원하는 데 사용됩니다. 및 Shadow DOM 구성 요소 간의 코드 충돌과 영향을 격리하는 것입니다. 🎜🎜Example🎜🎜Define hello-comComponent🎜

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

🎜Use hello-comComponent🎜

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

🎜위의 코드에서 볼 수 있듯이 hello.html은 표준에 의해 정의된 컴포넌트(hello-comComponent라는 이름)이며, 이 컴포넌트는 자체 구조, 스타일 및 로직을 만든 다음 index.html에 구성 요소 파일을 도입하여 일반 태그처럼 사용하세요. 🎜🎜Angular Component🎜🎜Angular Component는 일종의 지시문으로, 템플릿이 있는 지시어로 이해될 수 있습니다. 다른 두 가지 유형은 속성 지시문과 구조 지시문입니다. 🎜🎜기본 구성🎜

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

🎜🎜🎜구성 요소 데코레이터: Angular 구성 요소가 되려면 각 구성 요소 클래스를 @comComponent로 장식해야 합니다. 🎜🎜🎜🎜구성 요소 메타데이터: 구성 요소 메타데이터: selector, template 등. 다음은 각 메타데이터의 의미에 중점을 둡니다. 🎜🎜🎜🎜컴포넌트 클래스: 컴포넌트는 실제로는 일반적인 클래스이며 컴포넌트의 로직은 컴포넌트 클래스에서 정의되고 구현됩니다. 🎜🎜🎜🎜구성 요소 템플릿: 각 구성 요소는 템플릿과 연결되어 결국 페이지에 렌더링됩니다. 페이지의 DOM 요소는 이 구성 요소 인스턴스의 호스트 요소입니다. 🎜🎜🎜🎜구성 요소 메타데이터🎜

자체 메타데이터 속성

함수🎜🎜animations🎜🎜AnimationEntryMetadata[]🎜🎜구성요소의 애니메이션 설정🎜🎜🎜changeDetection🎜🎜 ChangeDetectionStrategy🎜🎜구성 요소의 변경 감지 전략 설정🎜🎜🎜encapsulation🎜🎜ViewEncapsulation🎜🎜구성 요소의 뷰 패키징 옵션 설정🎜🎜🎜entryComponents🎜🎜 any[]🎜🎜이 구성 요소 뷰에 동적으로 삽입될 구성 요소 목록을 설정합니다.🎜🎜🎜interpolation🎜🎜[string, string]🎜🎜사용자 정의 구성 요소 보간 태그, 기본값은 이중 중괄호 {{}}🎜🎜🎜moduleId🎜🎜string🎜🎜ES/CommonJS 아래 구성 요소의 모듈 ID를 설정합니다. 사양, 템플릿 스타일에 대한 상대 경로를 확인하는 데 사용됩니다🎜🎜🎜styleUrls🎜🎜string[]🎜🎜구성 요소에서 참조하는 외부 스타일 파일 설정🎜🎜🎜styles🎜🎜 string[]🎜🎜구성요소에서 사용하는 인라인 스타일 설정🎜🎜🎜template🎜🎜string🎜🎜구성요소의 인라인 템플릿 설정🎜🎜 🎜templateUrl🎜🎜 string🎜🎜구성 요소 템플릿이 있는 경로를 설정합니다.🎜🎜🎜viewProviders🎜🎜Provider[]🎜🎜구성 요소와 그 모든 항목을 설정합니다. 사용 가능한 하위 구성 요소(ContentChildren 제외) Service🎜🎜🎜🎜

从 core/Directive 继承

이름	유형

名称	类型	作用
exportAs	string	设置组件实例在模板中的别名，使得可以在模板中调用
host	{[key: string]: string}	设置组件的事件、动作和属性等
inputs	string[]	设置组件的输入属性
outputs	string[]	设置组件的输出属性
providers	Provider[]	设置组件及其所有子组件（含ContentChildren）可用的服务（依赖注入）
queries	{[key: string]: any}	设置需要被注入到组件的查询
selector	string	设置用于在模板中识别该组件的css选择器（组件的自定义标签）

几种元数据详解

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

inputs

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

等价于：

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

outputs

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

等价于：

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

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: `
        <input #theInput type=&#39;text&#39; />
        <p>Demo Component</p>
    `,
    queries: {
        theInput: new ViewChild(&#39;theInput&#39;)
    }
})
export class DemoComponent {
    theInput: ElementRef;
}

等价于：

@Component({
    selector: 'demo-component',
    template: `
        <input #theInput type=&#39;text&#39; />
        <p>Demo Component</p>
    `
})
export class DemoComponent {
    @ViewChild(&#39;theInput&#39;) theInput: ElementRef;
}

queries - 内容查询

<my-list>
    <li *ngFor="let item of items;">{{item}}</li>
</my-list>

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

@Component({
    selector: 'my-list',
    template: `
        <ul>
            <ng-content></ng-content>
        </ul>
    `,
    queries: {
        items: new ContentChild(ListItem)
    }
})
export class MyListComponent {
    items: QueryList<ListItem>;
}

等价于：

@Component({
    selector: 'my-list',
    template: `
        <ul>
            <ng-content></ng-content>
        </ul>
    `
})
export class MyListComponent {
    @ContentChild(ListItem) items: QueryList<ListItem>;
}

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使用构造函数新建组件后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法：

生命周期钩子	调用时机
ngOnChanges	在ngOnInit之前调用，或者当组件输入数据（通过@Input装饰器显式指定的那些变量）变化时调用。
ngOnInit	第一次ngOnChanges之后调用。建议此时获取数据，不要在构造函数中获取。
ngDoCheck	每次变化监测发生时被调用。
ngAfterContentInit	使用d553bd28b5bbbbd4b6fb4990edbabbf0将外部内容嵌入到组件视图后被调用，第一次ngDoCheck之后调用且只执行一次（只适用组件）。
ngAfterContentChecked	ngAfterContentInit后被调用，或者每次变化监测发生时被调用（只适用组件）。
ngAfterViewInit	创建了组件的视图及其子视图之后被调用（只适用组件）。
ngAfterViewChecked	ngAfterViewInit，或者每次子组件变化监测时被调用（只适用组件）。
ngOnDestroy	销毁指令/组件之前触发。此时应将不会被垃圾回收器自动回收的资源（比如已订阅的观察者事件、绑定过的DOM事件、通过setTimeout或setInterval设置过的计时器等等）手动销毁掉。

相关推荐：

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

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

위 내용은 Angular 개발 실습(3): Angular 구성 요소 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!