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 ]

我使用了exports数组在任何地方使用

我想在这里使用

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 ]
})

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

1 个答案: