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

Question

在我的application.one中有两个模块是雇主和第二个是登陆。我已经在登陆模块中创建了一个组件，我想与雇主模块共享这个组件。为此，我在父模块中的app.module.ts中声明了这个组件，并在子模块中使用它们。

​

​

如果我在单个模块中使用它，它已经可以工作了，但是当我在不同的模块中共享它时，它会显示错误

​

student-student ing.Component.html和student-student ing.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 ->它不包含任何关于学生评分的组件。

​

以下是app.module.ts的声明

​

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

​

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

Answer 2

对于第一个屏幕截图问题read this.

从app.module.ts文件中删除StudentRatingsComponent。它将修复第二个屏幕截图问题。

Answer 3

在着陆模块中添加exports属性，并导出要与其他模块共享的组件。在你的应用模块中，只需导入你的登陆模块即可。

考虑下面的类是您的LandingModule

@NgModule({

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

只需在应用程序模块中导入LandingModule即可

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