Дочерний путь совпадает с родительским путем на угловом 2, не показывая дочерний компонент - PullRequest
Новая
       7

Дочерний путь совпадает с родительским путем на угловом 2, не показывая дочерний компонент

0 голосов
/ 08 ноября 2019

У меня есть такой код

app.routes.ts 

export const ROUTES: Routes = [
    { path: '', redirectTo: '/', pathMatch: 'full' },
    { path: 'login', component: LoginComponent, pathMatch: 'full', data: { title: 'Login' } },
    { path: 'register', component: RegisterComponent, pathMatch: 'full', data: { title: 'Register' } },
    { path: 'forgot-password', component: ForgotPasswordComponent, pathMatch: 'full', data: { title: 'Forgot Password' } },
    { path: 'test', component: TestPopToasterComponent, pathMatch: 'full'}
];

app.module.ts 

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        LoginComponent,
        RegisterComponent,
        ForgotPasswordComponent,
    ];
    imports: [
        RouterModule.forRoot(ROUTES, { useHash: false, preloadingStrategy: PreloadAllModules }),
        MainModule,
        //other module
    ];

main.routes.ts 

export const routes = [
  { path: '', component: MainComponent, children: [
    { path: '', loadChildren: './homepage/homepage.module#HomepageModule' },
    { path: 'product/:slug', loadChildren: './product/product.module#ProductModule' },
    { path: 'static/:slug', loadChildren: './static/static.module#StaticModule' },
  ]},
];

main.module.ts 

@NgModule({
    declarations: [
        MainComponent,
        HeaderComponent,
        FooterComponent
    ],
    imports: [
        RouterModule.forChild(routes),
        ProductModule,
        StaticModule,
        HomepageModule
    ]
})
export class MainModule {
    public static routes = routes;
 }

домашняя страница. router.ts 

export const routes = [
    { path: '', component: MainComponent, children: [
        { path: '', component: HomepageComponent }
    ]}
];

homepage.module.ts 

@NgModule({
    declarations: [
        HomepageComponent,
        BannerComponent,
        BrandComponent
    ],
    imports: [
        RouterModule.forChild(routes),
        BrowserModule
    ]
})
export class HomepageModule {
    public static routes = routes;
}

product.module.ts 

@NgModule({
    declarations: [
        ProductComponent
    ],
    imports: [
        RouterModule.forChild(routes)
    ]
})
export class ProductModule {
    public static routes = routes;
}

product.router.ts 

export const routes = [
    { path: '', component: MainComponent, children: [
        { path: 'product/:slug', component: ProductComponent, data: { title: 'Product' } }
    ]}
];

static.module.ts 

@NgModule({
    declarations: [
        StaticComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild(routes),
    ],
})
export class StaticModule {
    public static routes = routes;
}

статическое. router.ts 

export const routes = [
    { path: '', component: MainComponent, children: [
        { path: 'static/:slug', component: StaticComponent,  pathMatch: 'full' },
    ]}
];

, когда я обращаюсь к '', он показывает только MainComponent

, но когда я получаю доступ к 'product /: slug' & 'static /: slug', он показывает MainComponentи дочерний компонент

я не знаю почему, вы, ребята, можете мне помочь?

...