Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Anwendungsfälle von Angular Components

Detaillierte Erläuterung der Anwendungsfälle von Angular Components

php中世界最好的语言Original: 2018-05-03 15:09:451894Durchsuche

Dieses Mal erkläre ich Ihnen ausführlich die Vorsichtsmaßnahmen bei der Verwendung von Angular Component. Schauen wir uns die folgenden Fälle an.

Webkomponente

Bevor wir Angular Component vorstellen, wollen wir kurz die W3C-Webkomponenten verstehen

Definition

W3C schlägt den Web Component-Standard vor, um die Standardmethode der Komponentisierung zu vereinheitlichen.

Jede Komponente enthält ihren eigenen HTML-, CSS- und JS-Code.

Der Web Component-Standard umfasst die folgenden vier wichtigen Konzepte:
1.Benutzerdefinierte Elemente (benutzerdefinierte Tags): Sie können benutzerdefinierte HTML-Tags und -Elemente erstellen.
2.HTML-Vorlagen (HTML-Vorlagen): Verwenden Sie < ;template> ;-Tag, um einige Inhalte vorzudefinieren, diese jedoch nicht in die Seite zu laden, sondern JS-Code zu verwenden, um sie zu initialisieren.
3: Sie können einen DOM-Teilbaum erstellen, der völlig unabhängig von anderen Elementen ist ;
4.HTML-Importe: Eine Methode zum Einfügen anderer HTML-Dokumente in HTML-Dokumente, .

Zusammenfassend ist die Möglichkeit, benutzerdefinierte Tags zum Einführen von Komponenten zu erstellen, die Grundlage der Front-End-Komponentisierung. Verweise auf HTML-Dateien und HTML-Vorlagen auf der Seite werden verwendet, um das Schreiben von Komponentenansichten und die Komponentenressourcenverwaltung zu unterstützen Shadow DOM dient dazu, die Konflikte und Auswirkungen des Codes zwischen Komponenten zu isolieren.

Beispiel

Hallo-Komponente definieren

<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-Komponente verwenden

<!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" rel="external nofollow" >
</head>
<body>
  <!--自定义标签-->
  <hello-component></hello-component>
</body>
</html>

Wie Sie dem obigen Code entnehmen können, hello.html ist eine durch Standards definierte Komponente (mit dem Namen hello-component). Führen Sie dann die Komponentendatei in index.html ein und verwenden Sie sie wie ein gewöhnliches Tag.

Angular Component

Angular Component ist eine Art Direktive und kann als Direktive mit Vorlage verstanden werden. Die anderen beiden Typen sind Attributdirektiven und Strukturdirektiven.

Grundkomposition

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

Komponentendekorator: Jede Komponentenklasse muss mit @component dekoriert werden, um eine Angular-Komponente zu werden.
Komponentenmetadaten: Komponentenmetadaten: Selektor, Vorlage usw. Im Folgenden konzentrieren wir uns auf die Bedeutung der einzelnen Metadaten.
Komponentenklasse: Komponente ist eigentlich eine gewöhnliche Klasse, und die Logik der Komponente wird in der Komponentenklasse definiert und implementiert.
Komponentenvorlage: Jede Komponente ist einer Vorlage zugeordnet, die schließlich auf der Seite gerendert wird. Das DOM-Element auf der Seite ist das Hostelement dieser Komponenteninstanz.

Komponentenmetadaten

Selbstmetadateneigenschaften

Von Kern/Direktive geerbt

名称	类型	作用
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 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=&#39;text&#39; />
    <p>Demo Component</p>
  `,
  queries: {
    theInput: new ViewChild('theInput')
  }
})
export class DemoComponent {
  theInput: ElementRef;
}

等价于：

@Component({
  selector: 'demo-component',
  template: `
    <input #theInput type=&#39;text&#39; />
    <p>Demo Component</p>
  `
})
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

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	使用
ngAfterContentChecked	ngAfterContentInit后被调用，或者每次变化监测发生时被调用（只适用组件）。
ngAfterViewInit	创建了组件的视图及其子视图之后被调用（只适用组件）。
ngAfterViewChecked	ngAfterViewInit，或者每次子组件变化监测时被调用（只适用组件）。
ngOnDestroy	销毁指令/组件之前触发。此时应将不会被垃圾回收器自动回收的资源（比如已订阅的观察者事件、绑定过的DOM事件、通过setTimeout或setInterval设置过的计时器等等）手动销毁掉。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

In Verbindung stehende Artikel

Mehr sehen