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中声明该组件，而是在module2中导入module1，

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

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

Answer 2

对于第一个屏幕快照，read this.

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

Answer 3

在着陆模块中添加导出属性，并导出要与其他模块共享的组件。然后在您的应用模块中导入您的登陆模块。

下面的类是您的LandingModule

@NgModule({

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

只需在您的App模块中导入LandingModule

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

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

3 个答案: