Question

我有一个组件：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-menu',
  templateUrl: './my-menu.component.html'
})
export class MenuComponent {
  //some code here
}

我在多个模块中使用了该组件，所以这就是为什么我要在其中导出SharedModule的原因：

import { NgModule } from '@angular/core';
import { MenuComponent } from './my-menu/my-menu.component';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [CommonModule],
  declarations: [ MenuComponent ],
  exports: [ MenuComponent, CommonModule ],
})
export class SharedModule {}

然后在多个基本与此类似的模块中使用SharedModule：

import { TestComponent } from './test.component';
import { Injector, DoBootstrap, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from '../shared/shared.module';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [TestComponent],
  imports: [BrowserModule, FormsModule, HttpClientModule, SharedModule, CommonModule],
  entryComponents: [TestComponent],
  providers: [],
  exports: []
})
export class TestModule implements DoBootstrap {
  constructor(private injector: Injector) { }

  ngDoBootstrap() {
    const ngElement = createCustomElement(TestComponent, { injector: this.injector, });
    customElements.get('my-test') || customElements.define('my-test', ngElement);
  }
}

但是，当我运行ng build命令时，出现错误：无法绑定到ngStyle，因为它不是my-menu.component.html文件中已知的'div'属性。在添加共享模块之前，该组件已经可以正常工作。我在做什么错了？

Answer 1

您需要从SharedModule导出CommonModule。

import { NgModule } from '@angular/core';
import { MenuComponent } from './my-menu/my-menu.component';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [CommonModule],
  declarations: [ MenuComponent ],
  exports: [ MenuComponent, CommonModule ], //add common module here
})
export class SharedModule {}

Answer 2

您不导入CommonModule模块。

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

Answer 3

我遇到了同样的问题，但以上所有措施均无济于事。在我的场景中，我犯了一个愚蠢的错误。让我解释一下，以便有人遇到同样的问题会有所帮助。

我正在图书馆项目中构建一个Angular组件。库组件的每个组件都有单独的模块。库项目有一个src文件夹，用于测试库中的组件。在此src文件夹中，有一个app-routing.module.ts。我已经导入了库组件，我将直接在此app.routing.module.ts中而不是模块中进行测试。这是造成上述问题的原因。

无法绑定到“ ngStyle”，因为导入CommonModule时它不是“ div”的已知属性

3 个答案: