javascript - 远离现有内容

Question

我使用 Angular CLI 创建了一个新的 Angular 7 应用程序。我将配置/设置保留为默认值，并开始在其上添加我的代码。 AppComponent 进行服务调用以获取一些博客文章并将它们传递给呈现它们的子组件。

app.component.html

<div class="container">
  <header class="header-site">
    <p class="site-title">Sully<p>
    <p class="site-tagline">Code-monkey</p>
    <p class="site-description">A sotware development blog with a touch of tech and a dash of life.</p>
  </header>

  <div *ngFor='let post of posts'>
    <app-blog-post [post]="post"></app-blog-post>
  </div>
</div>

<router-outlet></router-outlet>

应用程序组件.ts

@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();
  }
}

这会加载前 10 篇博文并使用我的 app-blog-post 子组件呈现它们。

博客文章组件.html

<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>

博客文章组件.ts

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

  @Input() post: Post;
}

实际情况是它按预期呈现了前 10 篇博文。现在，在 app-routing.module.ts 类中，我添加了 /blog/:id 作为路由，当您单击帖子标题。

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

我不明白这里的路由机制。当我通过路由器导航到帖子时，没有任何反应。我在浏览器的 URL 栏中看到 URL 路径发生变化，但内容没有变化。

我想要做的是，当我点击特定路线时，将当前 View 中的 10 篇文章替换为已经作为页面上唯一文章获取的单个文章。我已经通读了文档，但不知道如何使用已创建的组件使用该内容的子集替换 View 中已有的内容。我不确定我是否必须将 10 个帖子的渲染移到一个独特的路径，并且只将 router-outlet 保留为 app.component.html< 中的唯一元素，对于 '/' 路由，路由到包含前 10 个帖子的组件。我担心这会使在同级组件之间共享我已经获取的发布数据变得更加困难，因为 parent 现在必须在两个 child 之间推/拉。这是一种倒退的处理方式吗？

此外，每篇博文都有一个独特的路径。我正在从现有的托管服务移植我的博客，其中帖子的路径是/blog/year/month/day/title。我的 Routes 对象可以像 /blog/:year/:month/:day/:title 一样简单吗？由于我无法使路由正常工作，因此我无法测试路由本身并查看是否可行。我想保持相同的路由，以免现有书签和搜索引擎结果链接被破坏。

Answer 1

当您使用路由机制时，指定的组件会在适当的 router-outlet 中呈现。我怀疑您在导航到路线时看到的是在页面最底部呈现的选定帖子。

正如您提到的，如果您想呈现默认博客文章列表，您将需要为其创建一个单独的路由/组件，让 router-outlet 为您呈现它.

路由的工作方式是遍历路由列表中的每个条目并检查当前路径是否匹配。这意味着顺序很重要。如果您想同时跟踪 /blog/:year/:month/:day/:title 和 blog/:id，您需要首先对它们进行最具体的排序。如果你想要一个空的 URL 指向一个登陆页面，就像你上面的那样，你可以在路线列表的底部。