Template parse errors: Can't bind to 'ngStyle' since it isn't a known property of 'div'. ("

• 1、背景

开发个公共组件，在组件中使用指令一直报错。

template: `
    <div class="content-text-bgp">
      <div class="content-text" *ngIf="sort" [ngStyle]="{'width': minWidth+'px'}">
        <div *ngFor="let item of sort; let i = index" 
             [ngClass]="{'content-text-title' : true,
              'content-text-title-sort': i > 0}">
          <div style="float: left">{{item.title}}</div>
          <div style="float: left; margin-left: 2em;">
            <span><img src="assets/img/smallCard/{{item.sort}}.png" class="sort-content-up"></span>
            <span style="padding-left: 0.5em">{{item.value}}</span>
          </div>
        </div>
      </div>
      <div class="content-text" *ngIf="!sort" [ngStyle]="{'width': minWidth+'px'}">
        <div class="content-text-title">{{title}}</div>
        <div class="content-text-content">{{this.util.toThousands(value, null)}}</div>
      </div>
    </div>
  `,

• 2、问题原因

angular的指令模块BrowserModule CommonModule 未导入。

• 3、解决办法

在app.module.ts中导入BrowserModule 

import {BrowserModule} from '@angular/platform-browser';
@NgModule({
    declarations: [
        
    ],
    imports: [
        BrowserModule,
        
    ],
    providers: [
        
    ],
    bootstrap: [AppComponent]
})

在你需要使用的模块中导入CommonModule

import { NgModule } from '@angular/core';
import { D3WidgetComponent } from './d3.widget';
import { SamllCardComponent } from './small.card';
import { CommonModule } from '@angular/common';
export const SCHEMA_THIRDS_COMPONENTS = [
  D3WidgetComponent,
  SamllCardComponent,
];

@NgModule({
  declarations: SCHEMA_THIRDS_COMPONENTS,
  entryComponents: SCHEMA_THIRDS_COMPONENTS,
  imports: [CommonModule],
  exports: [...SCHEMA_THIRDS_COMPONENTS],
})
export class JsonSchemaModule {}