Angular 6子路由不起作用

Posted 2023-03-13

【中文标题】Angular 6子路由不起作用

【英文标题】：Angular 6 child routes not working

【发布时间】：2019-02-01 13:27:34

【问题描述】：

我有一个 angular 6 应用程序的简单导航，我试图在一个简单的配置中使路由和子路由工作，但不幸的是我似乎无法让它工作。

这是我的应用程序的结构

└───src
    ├───app
    │   ├───components
    │   │   ├───about
    │   │   ├───clients
    │   │   ├───footer
    │   │   ├───how-it-wo
    │   │   ├───partners
    │   │   ├───projects
    │   │   ├───team
    │   │   ├───whatwedo
    │   │   └───why-choos
    │   ├───layout
    │   │   └───main-layo
    │   └───shared
    ├───assets
    │   ├───charts
    │   ├───css
    │   ├───fonts
    │   ├───icon
    │   └───images
    └───environments

这里是路由，app.routing.module.ts

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import  RouterModule, Routes  from '@angular/router';
import  MainLayoutComponent  from './layout/main-layout/main-layout.component';
import  AboutComponent  from './components/about/about.component';
import  WhatwedoComponent  from './components/whatwedo/whatwedo.component';
import  ProjectsComponent  from './components/projects/projects.component';
import  FooterComponent  from './components/footer/footer.component';
const routes: Routes = [
  
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  ,
  
    path: 'home',
    component: MainLayoutComponent,
    children: [
      
        path: 'about',
        component: AboutComponent
      ,
      
        path: 'what',
        component: WhatwedoComponent
      ,
      
        path: 'projects',
        component: ProjectsComponent
      ,
      
        path: 'contacts',
        component: FooterComponent
      
    ]
  
];


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

这里是html

<nav class="main-nav">
    <ul class="main-nav__list " ng-sticky [addClass]="'main-sticky-link'" [ngClass]="ref.click === true? 'Navbar__ToggleShow' :''">
          <li class="main-nav__item" routerLinkActive="active">
            <a class="main-nav__link" routerLink="/">Home</a>
          </li>
          <li class="main-nav__item" routerLinkActive="active">
            <a class="main-nav__link" routerLink="/home/about">About us</a>
          </li>
          <li class="main-nav__item" routerLinkActive="active">
            <a class="main-nav__link" routerLink="/home/what">What we do</a>
          </li>
          <li class="main-nav__item" routerLinkActive="active">
            <a class="main-nav__link" routerLink="/home/projects">Projects</a>
          </li>
          <li class="main-nav__item" routerLinkActive="active">
            <a class="main-nav__link" routerLink="/home/contacts">Contacts</a>
          </li>
        </ul>
</nav>
<div class="majeni-app">
  <app-whatwedo></app-whatwedo>
  <app-about></app-about>
  <app-projects></app-projects>
  <app-why-choose-us></app-why-choose-us>
  <app-team></app-team>
  <app-footer></app-footer>
</div>

UPDATE 这里是 gitbuh repo 供参考 https://github.com/gruby-murzyn/agency/tree/master/majeni

当我点击关于我们的例子时，什么都没有发生，但浏览器上的 url 看起来还不错

http://localhost:4200/home/about

我的代码做错了什么？

【问题讨论】：

@Nico 这里是github的链接github.com/gruby-murzyn/agency/tree/master/majeni

<router-outlet></router-outlet> 在哪里？尝试在 html 中添加它

在 app.component.html 中，这里是 github 中的应用链接github.com/gruby-murzyn/agency/tree/master/majeni

你在 app.module.ts 中有错误的导入使用 import AppRoutingModule from './app-routing.module'; 而不是 import AppRoutingModule from './/app-routing.module';

【参考方案1】：

当您在路由中使用 children 时，父组件需要在其 html 中包含 <router-outlet></router-outlet> 才能将子组件加载到该父组件中。 Angular Docs on Child Configuration

此外，对于 routed 组件，无需在父组件的 html 中添加组件选择器，因为它们将由您的 router-outlet 下方的路由器自动注入。

所以你在你的情况下改变你的 最后显示的 div：

<div class="majeni-app">
 <router-outlet></router-outlet>
<!-- All children will be inserted here -->
  <app-footer></app-footer>
</div>

或者你在 html 中的选择器不是路由组件，应该显示在每个子组件上 然后只需将router-outlet 添加到特定位置

<div class="majeni-app">
  <app-whatwedo></app-whatwedo>
  <app-about></app-about>
  <app-projects></app-projects>
  <app-why-choose-us></app-why-choose-us>
  <app-team></app-team>
  <router-outlet></router-outlet>
  <!-- All children will be loaded here -->
  <app-footer></app-footer>
</div>

【讨论】：

你的兄弟，你可以看到你的方法只显示页眉和页脚，但我希望在应用程序上线时显示所有内容，当用户点击我们或我们的项目或联系人时，应该只是向下滚动到关于我们部分或项目或联系人等，是否有可能实现？如果有怎么办？

在您编辑完答案后，所有内容都已加载，但是当我单击例如关于我们时，页面不会向下滚动到关于我们部分，是否可以实现？

当您导航到任何页面时会发生什么？它是滚动到顶部还是滚动位置保持不变？

什么都不做兄弟，我想要这样的东西angular-landing.mhrafi.com/home/one 尝试点击任何导航链接，你会看到会发生什么

我不知道为什么我错过了这个细节，但我从来不知道子路由的输出必须进入父组件。这是我第一次看到它的实际解释。不过，这很有意义！