角度传递数据到共享模块

Question

我正在编写代码以从API获取会员列表并将其显示在会员卡列表中（模块A）。成员卡是共享模块（模块B）。将模块B导入模块A并显示为列表是没有问题的（仅使用硬编码的html）。 但是，我需要在循环内将每个成员数据从模块A传递到模块B，以便在成员卡中显示数据。请帮助我了解如何将数据从模块A传递到模块B

我已遵循参考文献https://medium.com/frontend-fun/angular-4-shared-modules-18ac50f24852的目的，以便使用共享会员卡模块创建会员卡列表。

在模块A中，我已经导入了会员卡模块

 import { MemberCardModule} from 'app/shared/member-card/member-card.module';

  declarations: [MemberListComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    MemberCardModule,
...... 

在component.html（模块A）中，以下是会员卡循环的代码

<app-member-card *ngFor="let member of members"></app-member-card>

**我在component.ts（模块A）中有一个成员数组

在循环期间，我需要将每个成员数据传递到模块B中的成员卡模板。

请帮助

Answer 1

您需要在接受成员的Input组件中添加app-member-card。

在您的MemberCardComponent中：

export class MemberCardComponent {
  @Input() member: Member;

  constructor() {} ...

在父母的模板中：

<app-member-card [member]="member" *ngFor="let member of members"></app-member-card>

Answer 2

对 MemberCardComponent 类使用@Input（）的示例。

在member-card.module.ts

中

import { MemberCardComponent } from "./member-card.component";

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [
        MemberCardComponent
    ],
    exports: [
        MemberCardComponent
    ]
})
export class MemberCardModule {}

在member-card.component.ts

中

export class MemberCardComponent implements OnInit {

    @Input() member: any;

    constructor() {}

    ngOnInit() {}
}

在member-card.component.html

中

<div *ngIf="member">
    {{ member.name }}
</div>

在member-list.module.ts

中

@NgModule({
    imports: [
        ...
        MemberCardModule
    ],
    declarations: [
        MemberListComponent
    ]
})
export class MemberListModule { }

在member-list.component.html

中

<app-member-card [member]="member" *ngFor="let member of members"></app-member-card>

Answer 3

要将数据传递到共享模块，请执行以下步骤：

模块A：

imports: [
  BrowserModule,
  ModuleB.forRoot({
    memberData: memberData
  })
]

模块B

export class ModuleB{ 
  static forRoot(memberData): ModuleWithProviders {
    return {
      ngModule: ModuleBModule,
      providers: [ModuleBService,{provide: 'memberData', useValue: memberData}]
    };
  }
}

模块B服务

export class ModuleBService{

  constructor(@Inject('memberData') private memberData:any) {
    console.log(memberData)
   }
}

Answer 4

您可以将MemberCardModule直接导入AppModule。 或导入ShareModule并将ShareModule导入AppModule。 将模块导入AppModule非常重要。 然后，您可以使用MemberCardModule。

关于显示MemberCard，您应该在其父div中使用*ngFor。

看看这个：

<div *ngFor="let member of members">
  <app-member-card [member]="member" />
</div>