Angular Web 组件 -> *ngIf 指令错误

Question

我是 webComponents 的新手。我遇到了一个问题，请问你能帮我吗？

让我告诉你到目前为止我做了什么： 我使用命令创建了一个类似 Angular shell 的项目 -

ng new MyAngularAppHolder --create-application=true

然后我在其中创建了一个名为共享的应用程序-

ng generate application shared --routing=false --style=less --skip-install=true

接下来我在其中创建了一个名为共享的模块，并添加了一个导航栏组件-

ng g m shared
ng g c shared/navBar

然后我在我的组件中添加了一些 html，就像这样-

<button (click)="hello()" >hi</button>
<div *ngIf="isBool" >hi</div>

其 ts 有代码 -

isBool = true
  hello(){
    alert('hello')
    this.isBool = !this.isBool;
  }

然后我将组件放入 App.component.html 中 接下来我尝试运行我的项目直到现在-

ng s shared

我得到了按钮，当我点击它时，div 确实出现了。所以直到这里它都运行良好。 然后我想将其作为一个网络组件，所以我创建了一个新项目 -

ng generate application my-app-1 --routing=true --style=less --skip-install=true

然后我安装了角度元素

ng add @angular/elements

因此在 my-app-1 应用程序的 app.module.ts 中， 我导入了导航栏组件、注入器、CUSTOM_ELEMENTS_SCHEMA、 然后我在模式中声明了 CUSTOM_ELEMENTS_SCHEMA， 接下来在构造函数中我添加了 Injector 类型的注入器的参数，这将是 createCustomElements 的配置 所以然后我通过 createCustomElement 创建了自定义元素，给出了标签名称和 createCustomElement 元素声明

import { Injector, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { createCustomElement } from '@angular/elements'
import { NavBarComponent } from 'projects/shared/src/app/shared/nav-bar/nav-bar.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas : [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
  constructor(private injector : Injector){
    customElements.define('my-app-nav-bar', createCustomElement(NavBarComponent, {injector}))
  }
 }

所以完成此操作后，我将标签放入html中

<my-app-nav-bar></my-app-nav-bar>

我运行该项目

ng s my-app-1 --port 4300

所以在 UI 中我现在可以看到我在共享应用程序中编写的按钮。

我面临的问题： 这样我编写的 *ngIf 指令就不会受到影响并引发错误，

无法绑定到“ngIf”，因为它不是“div”的已知属性

我尝试了各种解决方案 - 从重新启动服务器 显式扩展 NavBarComponent 上的 CommonModule。

我还检查了- 关于此的角度文档，我没有获得与此问题相关的任何信息

但问题仍然存在，有人可以帮我解决这个奇怪的问题吗？

任何帮助将不胜感激，提前致谢

更新：我尝试为配置添加strategyFactory，但这也不起作用

Answer 1

请确保导入

CommonModule

，如下所示：

import { CommonModule } from '@angular/common';  

@NgModule({
 imports: [CommonModule],
 declarations: [MyComponent]
})

...

class AppModule{}