Angular 将角度传递数据到共享模块

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

为了使用共享会员卡模块创建会员卡列表，我遵循了此参考

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

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

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

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

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

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

---

请提供帮助

您需要在接受会员的

应用程序会员卡

组件中添加

输入

在MemberCardComponent中：

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

  constructor() {} ...

在父级的模板中：

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

为MemberCardComponent类使用@Input（）的示例

In member-card.module.ts

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

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

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

在member-card.component.ts中

export class MemberCardComponent implements OnInit {

    @Input() member: any;

    constructor() {}

    ngOnInit() {}
}

在member-card.component.html中

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

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

在member-list.component.html中

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

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

---

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

模块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)
   }
}

---

您可以直接将MemberCardModule导入AppModule。 或者导入ShareModule并将ShareModule导入AppModule。 将模块导入AppModule非常重要。 然后你就可以使用会员卡模块了

关于display MemberCard，您应该在其父div中使用

*ngFor

看看这个：

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

为什么需要模块B来完成此任务？为什么不在同一模块上？此会员卡将在应用程序中的许多地方使用。这就是为什么我需要将其用作共享模块的原因。您混淆了模块和组件。父组件可以使用输入将数据传递给子组件。组件是否是同一模块的一部分不会改变您执行该操作的方式。您不需要在模块之间传递数据，而是在组件之间传递数据。谢谢，我使用了这段代码，并且在共享组件中始终将“成员”作为字符串@内达·佩龙的解决方案奏效了。它应该插入[成员]=“成员”。无论如何，谢谢，你是对的，我的错。忘记加大括号了。更新了答案非常感谢。我想我需要使用这种方法通过服务将数据传递到组件。是的，根据您的问题，这是将数据传递到模块的方法。但是，正如其他答案中所提供的，对于您在组件级通过的特殊要求，这是我的另一个问题，您能检查一下并告诉我您的想法吗？是的，当然。我同意，我明白当我看到你的答案时，我问问题的方式有问题。当然，在某些情况下，这种方法比@Neda的答案要好得多——多谢阿德里塔耶，没问题。如果有人在谷歌上搜索这个问题，你会发现这个答案很有用，因为在很多情况下它是必需的。一个很好的例子是将环境变量传递给自定义库模块。这是我遇到的另一个问题。请检查一下，并给出您的想法