Angular 6 WebComponent变量

Question

我有一个正确制作的组件，我想在角度6中做Web组件。 但是，生成Web组件后，变量将停止工作。 例如，更改滑块的值不会更改[(ngModel)]="amountShare"。

App.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {Injector, NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {AppComponent} from './app.component';
import {SectionComponent} from './section/section.component';
import {createCustomElement} from '@angular/elements';
@NgModule({
    declarations: [
        AppComponent,
        SectionComponent
    ],
    imports: [
        BrowserModule,
        FormsModule
    ],
    entryComponents: [SectionComponent],
})
export class AppModule {
    constructor(private injector: Injector) {
    }

    ngDoBootstrap() {
        const customSection = createCustomElement(SectionComponent, {injector: this.injector});
        customElements.define('custom-section', customSection);
    }
}

section.component.ts，codepen上的section.component.html