Angular开发实践（三）：剖析Angular Component
发布时间：2020-12-17 08:19:55 所属栏目：安全 来源：网络整理
导读：Web Component 在介绍Angular Component之前，我们先简单了解下W3C Web Components 定义 W3C为统一组件化标准方式，提出Web Component的标准。 每个组件包含自己的html、css、js代码。 Web Component标准包括以下四个重要的概念： Custom Elements（自定义标
Web Component在介绍Angular Component之前，我们先简单了解下W3C Web Components 定义
概括来说就是，可以创建自定义标签来引入组件是前端组件化的基础，在页面引用 HTML 文件和 HTML 模板是用于支撑编写组件视图和组件资源管理，而 Shadow DOM 则是隔离组件间代码的冲突和影响。 示例定义hello-component <template id="hello-template">
<style>
h1 {
color: red;
}
</style>
<h1>Hello Web Component!</h1>
</template>
<script>
// 指向导入文档，即本例的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
});
</script>
使用hello-component <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="赖祥燃,laixiangran@163.com,http://www.laixiangran.cn"/>
<title>Web Component</title>
<!--导入自定义组件-->
<link rel="import" href="hello.html">
</head>
<body>
<!--自定义标签-->
<hello-component></hello-component>
</body>
</html>
从以上代码可看到，hello.html 为按标准定义的组件（名称为 hello-component ），在这个组件中有自己的结构、样式及逻辑，然后在 index.html 中引入该组件文件，即可像普通标签一样使用。 Angular ComponentAngular Component属于指令的一种，可以理解为拥有模板的指令。其它两种是属性型指令和结构型指令。 基本组成@Component({
selector: 'demo-component',template: 'Demo Component'
})
export class DemoComponent {}
组件元数据自身元数据属性
从 core/Directive 继承
几种元数据详解以下几种元数据的等价写法会比元数据设置更简洁易懂，所以一般推荐的是等价写法。 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 eventEmitter<false>();
}
等价于： @Component({
selector: 'demo-component'
})
export class DemoComponent {
@Output() ready = new eventEmitter<false>();
}
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='text' />
<div>Demo Component</div>
`,queries: {
theInput: new ViewChild('theInput')
}
})
export class DemoComponent {
theInput: ElementRef;
}
等价于： @Component({
selector: 'demo-component',template: `
<input #theInput type='text' />
<div>Demo Component</div>
`
})
export class DemoComponent {
@ViewChild('theInput') 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
changeDetection
encapsulation
生命周期当Angular使用构造函数新建组件后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法：
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |