无法绑定到"ngStyle"，因为导入CommonModule时它不是"div"的已知属性 [英] Can't bind to 'ngStyle' since it isn't a known property of 'div' when CommonModule has been imported

问题描述

我有一个组件:

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

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

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

I use that component in multiple modules, so that's why I have a SharedModule in which I export it:

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:

And I use the SharedModule in multiple modules that are basically similar to this:

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'属性.在添加共享模块之前，该组件已经可以正常工作.我在做什么错了?

However when I run the ng build command, I get the error: Can't bind to 'ngStyle' since it isn't a known property of 'div', which happens in file my-menu.component.html. This component has already been working correctly before I added the shared module. What am I doing wrong?

推荐答案

您需要从SharedModule导出CommonModule.

You need to export CommonModule from 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 ], //add common module here
})
export class SharedModule {}

这篇关于无法绑定到"ngStyle"，因为导入CommonModule时它不是"div"的已知属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！