嵌套组件不适用于 Angular 中的路由

Posted 2023-02-23

【中文标题】嵌套组件不适用于 Angular 中的路由

【英文标题】：Nested-Components not working with Routing in Angular

【发布时间】：2020-12-23 18:20:44

【问题描述】：

我正在尝试在自己的项目中学习角度，我从处理路由路径：/ 开始，即在(app.routing.module.ts) 中渲染HomepageComponent

import  NgModule  from '@angular/core';
import  Routes, RouterModule  from '@angular/router';
import  HomepageComponent  from './homepage/homepage.component';
import  BestProductComponent  from './best-product/best-product.component';

const routes: Routes = [
   path: '', component: HomepageComponent ,
];

@NgModule(
  declarations: [ BestProductComponent ],
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
)
export class AppRoutingModule  

HomepageComponent(homepage.component.html)要渲染BestProductComponent

<app-best-product></app-best-product>

但是在这里，我得到了什么：

src/app/homepage/homepage.component.html (2:1) 'app-best-product' 不是已知元素：

如果“app-best-product”是一个 Angular 组件，则验证它是该模块的一部分。 如果“app-best-product”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

我正在寻找这个问题的解决方案，你可以在这里找到项目 StackBlitz.

【参考方案1】：

查看天气你在 app.module.ts 中注册了这个组件 BestProductComponent 之类的

    declarations: [
    AppComponent,
    BestProductComponent
  ]

也在 BestProductComponent .ts 文件中检查

@Component(
  selector: 'app-best-product',
  ----------------------------
  ----------------------------
)

【讨论】：

在app.module.ts中添加BestProductComponent后，我得到了：The Component 'BestProductComponent' is declared by more than one NgModule.

然后你必须从 app.routing.mmodule 中删除它，它应该适用于这个答案:)

我会从app.routing.module.ts 中删除BestProductComponent 看看。