Question

我正在尝试在我的角度4项目中使用this库，该项目源自this项目。当我在组件模块中导入此库的模块时，它工作正常。例如，我有一个登录组件，其中包含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.

如何在角度4中实现此目的？
我还想了解为什么这种方法不起作用，我在这里缺少什么？

Answer 1

找到答案。感谢this文章。

对于遇到同样问题的其他人：

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

我从SharedModules导出了LoadingModule;我的Login组件能够访问LoadingModule的指令

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

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

export class SharedModules {

}

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

1 个答案: