Angular模塊上共享組件上的選擇器出錯

Question

我的目錄中有一個公共組件（它是一個加載器）

loader
 loader.component.html
 loader.component.ts

登錄使用加載程序在頁面加載時顯示它，這是樹

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>

我得到這個錯誤

無法綁定到“加載”，因為它不是“應用加載程序”的已知屬性。

加載程序工作正常，因為我是第一次登錄時使用的，所以當我嘗試在其他模塊上使用它時，就會出現錯誤。

我必須在哪里聲明loaderComponent由應用程序中的所有頁面共享？

登錄名，加載器和登陸頁面與應用程序樹處於同一級別

我正在學習Angular的結構，如果這不是最好的方法，我接受建議

添加加載程序代碼

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();
  }

}

我用這種方式

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

this.loading.next( true );

Answer 1

您應該將登錄模塊導入到newUserModule或將newUserComponent導入到LandingPageModule：

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

要么：

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