远离现有内容

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

app.component.html(应用程序组件.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 子组件。

blog-post-component.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>

blog-post-component.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路径的改变,但是内容没有改变。

我要做的是将当前视图中的10篇文章替换为一篇文章,当我点击那个特定的路径时,这篇文章已经作为页面上唯一的一篇文章被提取出来了。我已经通读了文档,但无法说明如何使用已经创建的组件将视图中已有的内容替换为该内容的一个子集。我不确定是否需要将10个帖子的渲染移到一个唯一的路径,只需保留 router-outlet 作为唯一的元素 app.component.html 为了 '/' 路由,路由到包含前10个柱的组件。我担心这会使在兄弟组件之间共享我已经获取的日志数据变得更困难,因为父级现在必须在两个子级之间推/拉。这是一种向后的处理方式吗?

此外,每个博客帖子都有一个独特的路线。我正在从一个现有的托管服务移植我的日志,该服务的日志路径是/blog/year/month/day/title。我的路由对象是否可以像 /blog/:year/:month/:day/:title 是吗?因为我不能让路由正常工作,所以我无法测试路由本身,看它是否可行。我希望保持相同的路由,这样现有书签和搜索引擎结果链接就不会断开。