首页 > 解决方案 > 在角度中使用共享模块的问题

问题描述

嗨,我正在寻找是否有人可以帮助我解决在角度 9 中共享不同模块中的组件的问题

我想在另一个名为“Home”的模块中使用“pub-events.module.ts”中的组件“PubEventCard”,我从 pub-event 模块导出组件并将模块导入 Home.module.ts 文件中,但我m 无法使用该组件,因为它给出了错误

core.js:4061 ERROR TypeError: Cannot read property 'name' of undefined
    at PubEventPageComponent.push../src/app/routes/pub-event/pub-event-page/pub-event-page.component.ts.PubEventPageComponent.setSeo (pub-event-page.component.ts:59)

我控制台并指向未找到的页面。我附上我的代码,期待有人能纠正我的错误,在此先感谢

pub-event.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../../shared/shared.module';
import {Routes, RouterModule } from '@angular/router';

import { PubEventListComponent } from './pub-event-list/pub-event-list.component';
// import { PubEventPageComponent } from './pub-event-page/pub-event-page.component';
import { PubEventPageComponent } from './pub-event-page/pub-event-page.component';
import { PubEventCheckInComponent } from './pub-event-check-in/pub-event-check-in.component';
import { PubEventCardComponent } from './pub-event-card/pub-event-card.component';

const routes: Routes = [
    { path: '', component: PubEventListComponent }, 
    { path: ':event_id', component: PubEventPageComponent  },
    { path: ':event_id/order', loadChildren: './pub-event-buy/pub-event-buy.module#PubEventBuyModule'  },
    { path: ':event_id/check-in', component: PubEventCheckInComponent },
    { path: 'orders', loadChildren: './pub-event-order/pub-event-order.module#PubEventOrderModule'  },
    { path: 'order', loadChildren: './pub-event-order/pub-event-order.module#PubEventOrderModule'  },
];

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    RouterModule.forChild(routes),

  ],
  // c
  declarations: [PubEventListComponent,  PubEventPageComponent, PubEventCheckInComponent, PubEventCardComponent],
  exports: [RouterModule, PubEventCardComponent],
  providers: []
})
export class PubEventModule { }

尝试导入 Home.module.ts

import { NgModule } from '@angular/core';
import { SharedModule } from '../../shared/shared.module';
import { HomeComponent } from './home/home.component';
import { Routes, RouterModule } from '@angular/router';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { FeedbackComponent } from './feedback/feedback.component';
import { GettingStartedComponent } from './getting-started/getting-started.component';
import { LandingComponent } from './landing/landing.component';
//import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { SwiperModule } from 'ngx-swiper-wrapper';
import { OrgBannerComponent } from './org-banner/org-banner.component';
import { EventBannerComponent } from './event-banner/event-banner.component';
//import { PubEventCardComponent } from '../pub-event/pub-event-card/pub-event-card.component';
import { PubEventModule } from '../pub-event/pub-event.module';



const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'user-profile', component: UserProfileComponent },
    { path: 'feedback', component: FeedbackComponent },
    { path: 'getting-started', component: GettingStartedComponent },
    { path: 'landing', component: LandingComponent },

];

@NgModule({
    imports: [
        SharedModule,
        //NgbModule,
        SwiperModule,
        RouterModule.forChild(routes),
        PubEventModule
    ],
    declarations: [HomeComponent, UserProfileComponent, FeedbackComponent, GettingStartedComponent, LandingComponent, OrgBannerComponent, EventBannerComponent,],
    providers:[

    ],
    exports: [
        RouterModule,SwiperModule,
        OrgBannerComponent,
        EventBannerComponent,
    ]
})
export class HomeModule { }

我尝试使用的 component.html 文件

<div>
    <div fxLayoutAlign.md="start center" fxLayoutAlign.sm="center center" fxLayout="row wrap" fxLayoutAlign="start center"
    fxLayoutGap="24px">
    <pub-event-card *ngFor="let event of events" [event]="event"  class="org-card"></pub-event-card>


  </div>
</div>

标签: angulartypescriptmodule

解决方案


推荐阅读