Javascript 远离现有内容的路由

我使用Angular CLI创建了一个新的Angular 7应用程序。我将配置/设置保留为默认设置，并开始在其上添加代码。

AppComponent

发出一个服务调用，以获取一些博客文章，并将它们传递给呈现它们的子组件

app.component.html 这将加载前10篇文章，并使用my

应用程序博客文章

子组件呈现它们

blog-post-component.html 结果是，它按照预期呈现了前10篇博客文章。现在，在

app routing.module.ts

类中，我添加了

/blog/：id

作为路由，当您单击文章标题时，我的子组件将路由到该路由

const routes: Routes = [
  {
    path: 'blog/:id',
    component: BlogPostComponent
  }
];

我不懂这里的路由机制。当我通过路由器导航到邮局时，什么也没发生。我在浏览器的URL栏中看到URL路径更改，但内容没有更改

我试图做的是，当我点击该特定路径时，将当前视图中的10篇文章替换为一篇已经作为页面上唯一一篇文章获取的文章。我已经通读了文档，但不知道如何使用已经创建的组件替换视图中已经存在的内容。我不确定是否必须将10篇文章的渲染移动到一个唯一的路径，只需将

路由器插座

作为

app.component.html

中的唯一元素，对于

'/'

路径，路由到包含前10篇文章的组件。我担心这会使在兄弟组件之间共享我已经获取的post数据变得更加困难，因为父级现在必须在两个子级之间推/拉。这是一种落后的处理方式吗

---

此外，每一篇博文都有一条独特的路线。我正在从一个现有的托管服务移植我的博客，其中帖子的路径是/blog/year/month/day/title。我的Routes对象是否可以像

/blog/:year/:month/:day/:title

那样简单？因为我无法让路由正常工作，所以我无法测试路由本身，看看这是否可行。我希望保持相同的路由，以便现有书签和搜索引擎结果链接不会中断。

使用路由机制时，指定的组件将在相应的

路由器出口中呈现。我怀疑当你导航到一条路线时，你看到的是在页面最底部呈现的选定帖子

正如你所提到的，如果你想呈现默认博客文章列表，你需要为它创建一个单独的路由/组件，让
路由器插座
为你呈现它

路由的工作方式是遍历路由列表中的每个条目并检查当前路径是否匹配。这意味着订单很重要。如果您想同时跟踪
/blog/：year/：month/：day/：title
和
blog/：id
，您需要首先对它们进行最具体的排序。如果您想要一个指向登录页的空URL，如上面所述，您可以在路由列表的底部放置类似于
{path:''，pathMatch:'full'，[component/redirectTo]}
的内容

@Component({selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})
export class AppComponent {
  posts: Post[];

  constructor(private blogService: BlogService) {}

  async ngOnInit() {
    await this.loadPosts();
  }

  async loadPosts() {
    this.posts = await this.blogService.getPosts();
  }
}

<article>
  <header>
    <h1 class="post-title"><a [routerLink]="['/blog', post.path]">{{post.title}}</a></h1>
    <h4 class="post-details">{{post.details}}</h4>
  </header>
  <div>
    <markdown ngPreserveWhitespaces [data]="post.content">
    </markdown>
  </div>
</article>

@Component({
  selector: 'app-blog-post',
  templateUrl: './blog-post.component.html',
  styleUrls: ['./blog-post.component.css']
})
export class BlogPostComponent implements OnInit {

  @Input() post: Post;
}

const routes: Routes = [
  {
    path: 'blog/:id',
    component: BlogPostComponent
  }
];