Angular 在多个角度组件中共享第三方指令

我试图在我的angular 4项目中使用这个库，它是从project派生的。当我在组件模块中导入此库的模块时，它工作正常。例如，我有一个login组件，它有一个login.module.ts：

import { NgModule, } from '@angular/core';
import { LoadingModule } from 'ngx-loading';
import { Login } from './login.component';


@NgModule({
  imports: [
    LoadingModule,
  ],
  declarations: [
    Login
  ]
})
export class LoginModule { }

以上操作非常好。

但是，我不想在每个组件中导入此模块，因为它会创建重复的代码。因此，我创建了一个共享模块，并在登录组件的模块和注册组件的模块中导入了共享模块

大概是这样的：

import { NgModule } from '@angular/core';
import { LoadingModule } from 'ngx-loading';

@NgModule({
    imports: [
        LoadingModule,
    ],
})

export class SharedModules {

}

已尝试在login.module中导入此项：

import { SharedModules } from '../../sharables/shared.module';

@NgModule({
  imports: [
    SharedModules,
  ],
  declarations: [
    Login
  ]
})
export class LoginModule { }

我还在我的主app.module中导入了SharedModule

以上抛出以下错误：

Can't bind to 'show' since it isn't a known property of 'ngx-loading'.
1. If 'ngx-loading' is an Angular component and it has 'show' input, then verify that it is part of this module.
2. If 'ngx-loading' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

如何在angular 4中实现这一点？

我也想了解为什么这种方法不起作用，我在这里遗漏了什么？

---

找到了答案。多亏了这篇文章

对于其他有相同问题的人：

这是一个范围问题。我在SharedModule中导入了LoadingModule，但LoadingModule的指令仅限于SharedModule的范围为了使导入SharedModules的其他组件（登录/注册等）能够访问SharedModules导入（本例中为LoadingModule），我必须导出它们

导出后，从共享模块加载模块；我的登录组件能够访问LoadingModule的指令

import { NgModule } from '@angular/core';
import { LoadingModule } from 'ngx-loading';

@NgModule({
    imports: [
        LoadingModule,
    ],
    exports: [
        LoadingModule
    ]
})

export class SharedModules {

}

---

找到了答案。多亏了这篇文章

对于其他有相同问题的人：

这是一个范围问题。我在SharedModule中导入了LoadingModule，但LoadingModule的指令仅限于SharedModule的范围为了使导入SharedModules的其他组件（登录/注册等）能够访问SharedModules导入（本例中为LoadingModule），我必须导出它们

导出后，从共享模块加载模块；我的登录组件能够访问LoadingModule的指令

import { NgModule } from '@angular/core';
import { LoadingModule } from 'ngx-loading';

@NgModule({
    imports: [
        LoadingModule,
    ],
    exports: [
        LoadingModule
    ]
})

export class SharedModules {

}

---

从文档：入门：在根应用程序模块中导入LoadingModule。你为什么不那样做呢？这不管用。我试过了。我更新了我的答案，提到我的基本项目是从ng2 admin（）派生的，它有一个根应用程序模块，然后是每个子组件的模块类。ngx加载只有在我将其导入到我的子组件的模块类（在我的示例中是登录模块）以添加到我的最后一条评论时才起作用：我尝试在我的应用程序的根模块（app.module.ts）中添加SharedModules，但也不起作用。这看起来是个糟糕的主意。但无论如何，这是不可能的。LoadingModule应该提供一个forChild（）静态方法，该方法将提供除服务提供程序之外的所有内容，该服务提供程序应该使用forRoot（）在根组件中声明。在我看来，为每个组件使用单独的模块是个糟糕的主意。是的，我认为它缺少允许您从文档中实现用例的代码：入门：在根应用程序模块中导入LoadingModule。你为什么不那样做呢？这不管用。我试过了。我更新了我的答案，提到我的基本项目是从ng2 admin（）派生的，它有一个根应用程序模块，然后是每个子组件的模块类。ngx加载只有在我将其导入到我的子组件的模块类（在我的示例中是登录模块）以添加到我的最后一条评论时才起作用：我尝试在我的应用程序的根模块（app.module.ts）中添加SharedModules，但也不起作用。这看起来是个糟糕的主意。但无论如何，这是不可能的。LoadingModule应该提供一个forChild（）静态方法，该方法将提供除服务提供程序之外的所有内容，该服务提供程序应该使用forRoot（）在根组件中声明。在我看来，为每个组件使用单独的模块是个糟糕的主意。是的，我认为它缺少允许您实现用例的代码