Angular 角度模块共享组件上的选择器出错

我的目录中有一个公共组件（它是一个加载程序）

当页面加载时，Login使用loader显示它，这是树

login
 login.component.html
 login.module.ts
 login.component.ts

我有这个用于login.module.ts的代码

@NgModule({
  declarations: [LoginComponent, LoaderComponent],
  imports: [ CommonModule ],
  exports: [ LoaderComponent ]

我在任何地方都使用导出数组

我想在这里用

landpage
 newUser
   newUser.component.html
   newUser.component.ts
   newUser.module.ts
 landpage.component.html
 landpage.module.ts
 landpage.component.ts

这是landpage.module.ts代码

@NgModule({
  declarations: [LandingPageComponent],
  imports: [
    CommonModule,
    LoginModule,
    NewUserModule
  ]
})

我导入了LoginModule，认为它已在LoaderComponent中声明

最后是newUser.component.html

@NgModule({
  declarations: [NewUserComponent],
  imports: [ CommonModule ]
})

当我尝试在newUser.component.html上使用选择器时

<app-loader [loading]='loading.asObservable()'></app-loader>

我犯了这个错误

无法绑定到“loading”，因为它不是的已知属性 “应用程序加载器”

加载程序工作正常，因为我第一次登录时使用了它，当我尝试在其他模块上使用它时出现了错误。

我必须在哪里声明loaderComponent由我的应用程序中的所有页面共享

登录、加载程序和landpage位于应用程序树的同一级别

我正在学习角度的结构，如果这不是最好的方法，我接受建议

添加加载程序代码

import { Component, OnInit, OnDestroy, Input } from '@angular/core';
import { Observable, Subscription } from 'rxjs';

@Component({
  selector: 'app-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.sass']
})

export class LoaderComponent implements OnInit, OnDestroy {
  @Input() loading: Observable<boolean>;
  public subscription: Subscription;
  public display = false;
  constructor() { }

  ngOnInit() {
    this.subscription = this.loading.subscribe( ( data: boolean ) => this.display = data );
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

}

从'@angular/core'导入{Component，OnInit，OnDestroy，Input}；
从“rxjs”导入{observatable，Subscription}；
@组成部分({
选择器：“应用程序加载程序”，
templateUrl:'./loader.component.html'，
样式URL:['./loader.component.sass']
})
导出类LoaderComponent实现OnInit、OnDestroy{
@输入（）加载：可观察；
公开认购：认购；
公开显示=假；
构造函数（）{}
恩戈尼尼特（）{
this.subscription=this.loading.subscripte（（数据：布尔）=>this.display=data）；
}
ngOnDestroy（）：void{
this.subscription.unsubscripte（）；
}
}

我是这样用的

public loading: Subject<boolean> = new Subject<boolean>();

this.loading.next( true );

公共加载：主题=新主题（）；
this.loading.next（true）；

您应该将登录模块导入newUserModule或将newUserComponent导入LandingPageModule：

@NgModule({
声明：[LandingPageComponent，NewUserComponent]，
进口：[
公共模块，
验证模块
]
})

或：

@NgModule({
声明：[NewUserComponent]，
导入：[CommonModule，LoginModule]
})

请添加实际的组件类别。我的直觉是，您可能没有使用

Input（）

进行装饰，或者某些东西被标记为private，但这些都是猜测，因为您没有包含代码。我将@IgorMark it包含为

public

也因为这是您对其他公共字段所做的操作：

@Input（）public load:observeable

还要确保加载

app loader

的组件也有一个

loading

属性。this

this.loading.subscribe（（数据：布尔）=>this.display=data）

是完全无用的。它可以替换为

@Input（）display:boolean

和

[display]=“load | async”

。您正在为自己创建大量额外的工作。newUserModule不导入LoginModule，在LoginModule中声明并导出加载程序组件。所以它没有访问加载器组件的权限。

public loading: Subject<boolean> = new Subject<boolean>();

this.loading.next( true );