Поделиться компонентом между двумя разными модулями

Question

в моем приложении есть два модуля. Один - работодатель, а второй - посадка. Я создал компонент в модуле посадки и хочу поделиться этим компонентом с модулем работодателя.Для этого я объявил этот компонент в app.module.ts в родительском модуле и использую их в дочерних модулях.

Если я использую это в одном модуле, он уже работает, но когда я делюсь им в разных модулях, это показывает мне ошибку

student-rating.component.html и student-rating.component.ts

<div class="stu_profile_ratings">
          <h3>Average Ratings</h3>
            <!-- <rating [(ngModel)]="performance" [disabled]="false"  [readonly]="true" [required]="true">
              </rating> -->
              <a (click)="showHideDrop();"> <img src ="../../../assets/images/drop-down-arrow-white.png" /></a> 
              <div *ngIf="showRatings" class="ratings_dropdown ">
                <h4>Ratings given by verified employers</h4>
                  <ul class="marginT10">
                    <li>
                      <h5>Performance</h5>
                     <!--  <rating [(ngModel)]="performance" [disabled]="false"  [readonly]="true" [required]="true"></rating> -->
                    </li>
                    <li>
                      <h5>Work Quality</h5>
               <!--        <rating [(ngModel)]="work_quality" [disabled]="false"  [readonly]="true" [required]="true"></rating> -->
                    </li>
                    <li>
                      <h5>Professionalism</h5>
                   <!--    <rating [(ngModel)]="professionalism" [disabled]="false"  [readonly]="true" [required]="true"></rating> -->
                    </li>
                  </ul>
              </div>

import { Component, OnInit ,Input, ChangeDetectorRef} from '@angular/core';
declare var $: any;
@Component({
  selector: 'app-student-ratings',
  templateUrl: './student-ratings.component.html',  
styleUrls: ['./student-ratings.component.css']
})
export class StudentRatingsComponent implements OnInit {
  showRatings : boolean = false;
  @Input() performance:string;
  @Input() work_quality:string;  
@Input() professionalism:string;
constructor() {  }
  ngOnInit() {  }
  showHideDrop(){
this.showRatings = !this.showRatings;
  }
}

landing.module.ts ---> Он не содержит ни одного компонента, касающегося student-rating.component.ts.

Это объявления app.module.ts

declarations: [AppComponent, StudentRatingsComponent,Page404Component, CapitalizePipe],

Answer 1

Компонент может быть объявлен только в одном модуле, если вам нужно использовать его в другом модуле, экспортируйте его из модуля, где вы его объявили, и импортируйте этот модуль в модуль, где вы хотите его использовать,

Например, у вас есть компонент с именем AComponent, у вас есть три модуля (module1, module2 и appModule).

@NgModule({
declarations: [AComponent],
exports: [AComponent]
});
export class module1;

Теперь, если вам нужно использовать этот компонент в module2, вы не объявляете этот компонент в module2, вы импортируете module1 в module2,

@NgModule({
imports: [module1]
})
export class module2;

для получения дополнительной информации см. Официальные документыhttps://angular.io/guide/sharing-ngmodules

Answer 2

Добавьте свойство export в свой модуль посадки и экспортируйте компонент, которым вы хотите поделиться с другими модулями.А в вашем модуле приложения просто импортируйте свой модуль посадки.

Обратите внимание на то, что под классом находится ваш LandingModule

@NgModule({

declarations:[StudentsRatingComponent],
exports:[StudentsRatingComponent]
})
export class LandingModule{}

И просто импортируйте модуль LandingModule в свой модуль приложения

@NgModule({
...
imports:[LandungModule],
...
})
export class AppModule{}

Answer 3

Для первого выпуска снимка экрана прочитайте это.

Удалите StudentRatingsComponent из app.module.ts файла.Будет исправлена ​​вторая проблема снимка экрана.