2.6 KiB

Raw Blame History

Elements

自定义元素（Elements）

Release Status

发布状态

Angular Labs Project - experimental and unstable. Breaking Changes Possible

Angular 实验室项目 - 试验性的、非稳定的。可能会发生破坏性变更

Targeted to land in the 6.x release cycle of Angular - subject to change

预计会包含在 Angular 的 6.x 发布周期内 —— 也可能会改。

Overview

概览

Elements provides an API that allows developers to register Angular Components as Custom Elements ("Web Components"), and bridges the built-in DOM API to Angular's component interface and change detection APIs.

Angular 元素提供了一种 API，它允许开发者把 Angular 组件注册为自定义元素（Web Components），并且在内置的 DOM API 和 Angular 的组件接口与变更检测 API 之间建立一个桥梁。


//hello-world.ts
import { Component, Input, NgModule } from '@angular/core';

@Component({
  selector: 'hello-world',
  template: `<h1>Hello {{name}}</h1>`
})
export class HelloWorld {
  @Input() name: string = 'World!';
}

@NgModule({
  declarations: [ HelloWorld ],
  entryComponents: [ HelloWorld ]
})
export class HelloWorldModule {}


//app.component.ts
import { Component, NgModuleRef } from '@angular/core';
import { createNgElementConstructor } from '@angular/elements';

import { HelloWorld } from './hello-world';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(injector: Injector) {
    const NgElementConstructor = createNgElementConstructor(HelloWorld, {injector});
    customElements.register('hello-world', NgElementConstructor);
  }
}

Once registered, these components can be used just like built-in HTML elements, because they are HTML Elements!

一旦注册，这些组件就可以像内置的 HTML 元素一样使用了，因为它们就是 HTML 元素！

They can be used in any HTML page:

它们可以用在任何 HTML 页面中：


<hello-world name="Angular"></hello-world>
<hello-world name="Typescript"></hello-world>

Custom Elements are "self-bootstrapping" - they are automatically started when they are added to the DOM, and automatically destroyed when removed from the DOM.

这些自定义元素是"自举"的 —— 当把它们添加到 DOM 中时，它们会自动启动；当从 DOM 中移除时，也会自动销毁。

2.6 KiB Raw Blame History Unescape Escape