Question

我在角度应用程序中运行角度元素时遇到问题。我有带有简单组件的简单应用程序。 AppModule：

import {BrowserModule} from '@angular/platform-browser';
import {ChangeDetectorRef, CUSTOM_ELEMENTS_SCHEMA, Injector, NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {TestComponent} from './test/test.component';
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {FormsModule} from "@angular/forms";
import {ButtonModule, DropdownModule, InputTextModule} from "primeng/primeng";
import {Test2Component} from './test2/test2.component';
import {createCustomElement} from "@angular/elements";

@NgModule({
  declarations: [
    AppComponent,
    TestComponent,
    Test2Component
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    DropdownModule,
    InputTextModule,
    ButtonModule,
  ],
  providers: [],
  entryComponents: [TestComponent],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
  constructor(private injector: Injector) {
    const TestElement = createCustomElement(TestComponent, {injector});
    customElements.define('appd-test', TestElement);
  }

  ngDoBootstrap() {
  }
}

test.component.ts：

import {Component, ViewEncapsulation} from '@angular/core';
import {SelectItem} from "primeng/api";

@Component({
  selector: 'appd-test',
  templateUrl: './test.component.html',
  encapsulation: ViewEncapsulation.Emulated
})
export class TestComponent {
  
  _message;
  _message2;
  
  cars: SelectItem[] = [
    {label: 'Audi', value: 'Audi'},
    {label: 'BMW', value: 'BMW'},
    {label: 'Fiat', value: 'Fiat'},
    {label: 'Ford', value: 'Ford'},
    {label: 'Honda', value: 'Honda'},
    {label: 'Jaguar', value: 'Jaguar'},
    {label: 'Mercedes', value: 'Mercedes'},
    {label: 'Renault', value: 'Renault'},
    {label: 'VW', value: 'VW'},
    {label: 'Volvo', value: 'Volvo'},
  ];
  
  _selectedCar: string;
  set selectedCar(value: string) {
    this._selectedCar = value;
  }
  
  set message(value) {
    this._message = value;
    console.log(value);
  }
  
  set message2(value) {
    this._message2 = value;
    console.log(value);
  }
}

test.component.html：

<div>
  <h1>TEST1</h1>

  <div>
    <span>Name: </span>
    <input type="text" [(ngModel)]="_message" pInputText />
  </div>
  <div>
    <span>Surname: </span>
    <input type="text" [(ngModel)]="message2" pInputText />
  </div>
  <div>
    <p-dropdown  [options]="cars" [(ngModel)]="selectedCar"></p-dropdown>
  </div>
  <div>
    <span>{{_message}}</span>
    <span>{{_message2}}</span>
    <span>{{_selectedCar}}</span>
  </div>
  <h2>......................</h2>
</div>

在ng构建之后，我有5个文件：main.js，polyfills.js，runtime.js，styles.js，vendor.js。

我要导入该Web组件的另一个角度应用程序。

<!doctype html>
<html lang="en">
<head>
...

</head>

<body>
  <app-root></app-root>
  <appd-test></appd-test> <!-- HERE WORKS, inside app-root NOT WORKING -->
  <script type="text/javascript" src="assets/scripts/appd/runtime.js"></script>
  <script type="text/javascript" src="assets/scripts/appd/polyfills.js"></script>
  <script type="text/javascript" src="assets/scripts/appd/styles.js"></script>
  <script type="text/javascript" src="assets/scripts/appd/vendor.js"></script>
  <script type="text/javascript" src="assets/scripts/appd/main.js"></script>

</body>
</html>

当我将此WebComponent放入新的角度应用程序事件的app.component.html中时不起作用-_message和_message2输入在屏幕上未显示任何内容。当我将测试Web组件直接放入index.html时，一切正常。

有人有什么建议吗？

Angular 6 Web组件。 Angular应用中的Angular元素不起作用

0 个答案: