Question

我在我的 Angular 项目中使用了 ngx-org-chart。问题是样式不起作用。

我的步骤如下：

我已经安装了软件包：

<块引用>

纱线添加ngx-org-chart

然后，我将 ngx-org-chart 导入添加到 angular.json 样式块

"styles": [ 
          "node_modules/ngx-org-chart/_theming.scss",
          "src/styles.scss"
],

仅此而已，它不起作用。然后，我还尝试了以下方法：

我已经在styles.scss中导入了以下样式：

import '~ngx-org-chart/_theming.scss'

但是样式不起作用。谁能帮我？。谢谢

编辑

在我的组件中，我有下一行代码来使用库：

<ngx-org-chart [nodes]="nodes" direction="vertical"></ngx-org-chart>

节点是：

nodes: any = [
    {
      name: 'Sundar Pichai',
      cssClass: 'ngx-org-ceo',
      image: '',
      title: 'Chief Executive Officer',
      childs: [
        {
          name: 'Thomas Kurian',
          cssClass: 'ngx-org-ceo',
          image: 'assets/node.svg',
          title: 'CEO, Google Cloud',
        },
        {
          name: 'Susan Wojcicki',
          cssClass: 'ngx-org-ceo',
          image: 'assets/node.svg',
          title: 'CEO, YouTube',
          childs: []
        },
        {
          name: 'Jeff Dean',
          cssClass: 'ngx-org-head',
          image: 'assets/node.svg',
          title: 'Head of Artificial Intelligence',
          childs: [
            {
              name: 'David Feinberg',
              cssClass: 'ngx-org-ceo',
              image: 'assets/node.svg',
              title: 'CEO, Google Health',
              childs: []
            }
          ]
        }
      ]
    },       
];

而且，在 app.module.ts 中，我有：

@NgModule({
  declarations: [
    AppComponent,
    EmptyRouteComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    CommonModule,
    ThemeModule,
    I18NextModule.forRoot(),
    NgxOrgChartModule
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})

编辑 2

当样式不起作用时，图表显示如下：

但它应该是这样的：

版本：

ngx-org-chart: 1.1.1
角度：11.0.5

Answer 1

在你的styles.css 中试试这个：导入'../node_modules/ngx-org-chart/_theming.scss';

Answer 2

我在 @import '~ngx-org-chart/_theming'; 中添加了 styles.scss。

在 import { NgxOrgChartModule } from 'ngx-org-chart'; 中导入 app.module.ts 为

    @NgModule({
        imports: [BrowserModule, FormsModule, NgxOrgChartModule],

在 html 中：

<ngx-org-chart [nodes]="nodes" direction="vertical" ></ngx-org-chart>

资产不可用，因为我没有导入它们

Angular - Ngx-org-chart 样式不起作用

2 个答案: