无法使用 Angular 6 制作单页应用程序？

Question

我正在开发一个有点像博客网站的应用程序，其中主页上会有文章列表，一旦单击任何文章，该文章的完整详细信息将通过替换文章列表在同一页面上打开。 使用当前代码，当我单击任何文章时，它会在页面底部打开文章详细信息。 这是我所拥有的

1.Index.html

<header>
<app-root></app-root>
<footer>

1. app.component.html

   <div>
   <p>article 1</p>
   <a routerLink="/article1"  >Link to details for article1</a>
   </div>
   <div>
   <p>article 2</p>
   <a routerLink="/article2"  >Link to details for article2</a>
   </div>
     <router-outlet></router-outlet>
   

Answer 1

我强烈建议您浏览Tour Of Heros Tutorial for Angular。 它将引导您了解构建 Angular 应用程序的基础知识。

构建 Angular 应用程序的最快方法是使用 CLI，这也是学习它的最简单方法。如果您不想使用 CLI，这也是一个选项，但我不建议您在学习它的工作原理时使用它。

要开始使用 CLI：

1. 确保您已安装 Node/NPM。
2. 然后安装 Angular CLI npm install -g @angular/cli
3. 然后新建一个应用ng new your-app-name
4. 然后您可以使用ng serve -o 编译应用程序并打开Web 浏览器，此时您可以尝试进行更改。

您遇到的与"routing" the Tour of Heros Application Tutorial 相关的导航问题还逐步介绍了其工作原理。

你真的需要在这里分离你的组件

应用组件.html

  <router-outlet></router-outlet>

article-list.html

<div>
<p>article 1</p>
<a routerLink="/article1"  >Link to details for article1</a>
</div>
<div>
<p>article 2</p>
<a routerLink="/article2"  >Link to details for article2</a>
</div>

这样你就可以通过路由显示article-list，然后在你想显示文章的时候它会消失。