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>

app.component.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中的唯一元素，并将'/'保留为唯一元素。 route，转到包含前10个帖子的组件。我担心这会使在同级组件之间共享已经获取的帖子数据变得更加困难，因为父级现在必须在两个子级之间进行推/拉操作。这是一种向后处理的方法吗？

此外，每篇博客文章都有一条独特的路线。我正在从现有托管服务中移植博客，其中帖子的路径为/ 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指向登录页面，则可以在路径列表的底部放置{ path: '', pathMatch: 'full', [component/redirectTo] }之类的内容。

远离现有内容

app.component.html

app.component.ts

blog-post-component.html

blog-post-component.ts

1 个答案: