在两个不同的模块之间共享一个组件

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

登陆.module.ts --->它不包含任何关于student-rating.component.ts的组件。

这些是 app.module.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>

Answer 1

一个组件只能在一个模块中声明，如果你需要在另一个模块中使用它，从你声明它的模块导出它，然后在你想使用它的模块中导入该模块，

例如，您有一个名为 AComponent 的组件，您有三个模块（module1、module2 和 appModule）。

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

现在，如果您需要在 module2 中使用此组件，则无需在 module2 中声明该组件，而是在 module2 中导入 module1，

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

有关更多信息，请参阅官方文档https://angular.io/guide/sharing-ngmodules