如何路由到 Angular 中的“子组件”

Question

我有这样的文件结构：

app/
└── blog/
    └── posts/
        └── python-coding/

我的标题中有一条通往博客的路线，我正在尝试创建一个通往Python编码帖子的routerLink。 posts 只是组织目录，没有任何组件。

我不明白如何使博客页面上的Python编码路由起作用。

// src/app/app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { BlogComponent } from './blog/blog.component';
import { PythonCoding } from './blog/posts/python-coding/python-coding.component';

export const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'blog', component: BlogComponent },
    { path: 'posts/python-coding', component: PythonCoding },
];

我注意到，当我有博客/帖子/Python编码时，当我将鼠标悬停在浏览器中时，它是博客/博客/...，因此从路径中删除了博客。

// src/app/app.component
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { HomeComponent } from './home/home.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    HeaderComponent,
    FooterComponent,
    HomeComponent,
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'frontend';
}

app 导入了 RouterOutlet，并在模板中使用它：

<!-- src/app/app.component.html -->
<app-header></app-header>
<main>
    <router-outlet></router-outlet>
</main>
<app-footer></app-footer>

标题有一个到博客的工作链接，但我希望博客有一个到 python 代码子页面的工作链接：

<!-- src/app/blog/blog.component.html -->
<h1>Blog Posts:</h1>
<a routerLink="posts/python-coding">Python Coding</a>

但是，单击该链接时不会转到该页面。

Answer 1

我想你可以选择这个LINK这将帮助你实现你想要实现的路由类型