时间戳

首页 > 解决方案 > Angular 6 网络组件。Angular 应用程序中的 Angular 元素不起作用

javascript - Angular 6 网络组件。Angular 应用程序中的 Angular 元素不起作用

问题描述

我在角度应用程序中运行角度元素有问题。我有简单的应用程序和简单的组件。应用模块：

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 build 之后，我有 5 个文件：main.js、polyfills.js、runtime.js、styles.js、vendor.js。

我要导入此 Web 组件的另一个 Angular 应用程序。

<!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 的新 Angular 应用程序事件不起作用时 - _message 和 _message2 输入没有在屏幕上显示任何内容。当我将测试 webcomponent 直接放入 index.html 时，一切正常。

有人对发生了什么有任何建议吗？

标签： javascriptangularangular6

解决方案

推荐阅读