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

【问题标题】：Angular - Ngx-org-chart style not workingAngular - Ngx-org-chart 样式不起作用
【发布时间】：2021-07-31 17:25:50
【问题描述】：

我在我的 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

【问题讨论】：

导入样式后，组件是怎么使用的，可以在描述中添加吗？请验证您是否也导入了 NgxOrgChartModule
@Tejeshree 我已经编辑了描述。谢谢你的问题
感谢您的更新。另外，确切的问题是什么，就像你说的样式不起作用？
谢谢。我添加了两张图片。其中一个是我如何看待它，另一个是@Tejeshree 应该如何。你可以看到它没有任何连接器。
谢谢，我自己尝试后添加了答案。

标签： angular typescript

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

在html中：

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

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

【讨论】：

你能分享一下你的stackoverflow吗？

【解决方案3】：

除了文档中所说的 https://www.npmjs.com/package/ngx-org-chart

将这个 angular.json 添加到

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

为我工作

【讨论】：