无法使用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应用程序的最快方法是使用CLI，这也是学习它的最简单方法。如果您不想使用CLI，这也是一个选择，但是我不建议您在学习它的工作原理时使用它。

要开始使用CLI：

1. 确保已安装节点/ 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相关的导航问题也逐步介绍了其工作原理。

您确实需要在此处分离组件

app-component.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，然后在您根据需要显示文章时消失。