Angular 2+ 路线基础答案

【问题标题】：Angular 2+ routage basicAngular 2+ 路线基础
【发布时间】：2022-09-28 01:26:18
【问题描述】：

完成一个名为 MenuDisplayComponent 的简单 Angular 组件，其中 menu-display-component 作为选择器。完成 appRoutes 变量的声明。

组件必须包含两个元素。它们象征着应用程序的菜单：当我们单击 id=\"menu1\" 的元素时，应该加载与 /menu1 路由关联的组件。单击 id=\"menu2\" 的元素时，必须加载与 /menu2 路由关联的组件。最初，两个组件都没有加载。您必须在 appRoutes 中创建相应的路由。 Menu1Component 对应menu1 路径，Menu2Component 对应menu2 路径。

您只需要更新菜单显示组件（模板中的 +）和 api 路由。

 import { Component, Input, NgModule } from \'@angular/core\';
    import {APP_BASE_HREF} from \'@angular/common\';
    import { RouterModule, Routes } from \'@angular/router\';
    
    
    @Component({
      selector:\'menu1-component\',
      template: `
        <div id=\"menuComp\">You are at menu 1.</div>
      `
    })
    export class Menu1Component {
    }
    
    @Component({
      selector:\'menu2-component2\',
      template: `
        <div id=\"menuComp\">You are at menu 2.</div>
       
      `
    })
    export class Menu2Component {
    }
    
    @Component({
      selector:\'menu-display-component\',
      template: `
         <div id=\"menuComp\">You are at menu 2.</div>
          <a id=\"menu1\" routerLink=\"/menu1\"></a>
        <a id=\"menu2\" routerLink=\"/menu2\"></a>
      `
      
    })
    export class MenuDisplayComponent {
      
    }
    
    export const appRoutes:Routes = [
      {path:\"menu1\",component:Menu1Component},
       {path:\"menu2\",component:Menu2Component}
    ];
    
    
    
    // #region Preview
    @Component({
        template: `    
          <menu-display-component></menu-display-component>
        `
    })
    export class PreviewComponent { }
    // #endregion Preview
    
    
    // #region Module declaration - Do not Change
    @NgModule({
      imports: [RouterModule.forRoot(appRoutes, {useHash: true})],
      exports: [RouterModule]
    })
    export class AppRoutingModule {
    }
    
    @NgModule({
        imports: [
          RouterModule,
          AppRoutingModule
        ],
        declarations: [PreviewComponent, Menu1Component, Menu2Component, MenuDisplayComponent],
        entryComponents: [PreviewComponent],
        providers: [{provide: APP_BASE_HREF, useValue : \'/\'}]
    })
    export class PreviewModule { }
    // #endregion Module declaration

请问您的问题是什么？
当我运行程序时它失败了，我制作了错误照片@DarrenStreet
测试没有通过。你应该检查什么是错的以及为什么它没有通过

标签： angular

【解决方案1】：

一种方法是使用子路由。这将帮助您在另一个组件中加载组件。您需要在父组件内添加路由器插座标签才能使其正常工作。让我知道这是否有帮助。

【讨论】：