74 lines
1.8 KiB
Markdown
74 lines
1.8 KiB
Markdown
|
# Elements
|
||
|
|
|
||
|
|
## Release Status
|
||
|
|
|
||
|
|
**Angular Labs Project** - experimental and unstable. **Breaking Changes Possible**
|
||
|
|
|
||
|
|
Targeted to land in the [6.x release cycle](https://github.com/angular/angular/blob/master/docs/RELEASE_SCHEDULE.md) of Angular - subject to change
|
||
|
|
|
||
|
|
## 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.
|
||
|
|
|
||
|
|
```ts
|
||
|
|
|
||
|
|
//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 {}
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
```ts
|
||
|
|
|
||
|
|
//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!
|
||
|
|
|
||
|
|
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.
|