在 Angular 中使用 routerOutlet 显示路由内容

2020-06-26 08:00:00 · 飞浪

介绍 Angular是一个单页应用程序开发框架。在单页应用程序中，只有一个HTML页面呈现给最终用户，并且该页面具有一个占位符元素，该元素中呈现并显示应用程序所有不同路由的HTML。此占

介绍

Angular 是一个单页应用程序开发框架。在单页应用程序中，只有一个 HTML 页面呈现给最终用户，并且该页面具有一个占位符元素，该元素中呈现并显示应用程序所有不同路由的 HTML。此占位符元素称为 router -outlet。在应用程序首次加载时呈现的单个页面永远不会往返服务器。在本指南中，您将学习如何使用 router-outlet 将不同路由的输出呈现给最终用户。您将创建一个演示应用程序，其中包含一个导航栏，其中包含指向应用程序的两个路由的链接。

要完成本指南，您必须具备以下条件：

节点-12.17.0
Angular CLI——9.0.2
Visual Studio Code - 1.45.1

入门

创建 Angular 项目

执行以下命令创建一个 Angular 项目。ng new router-outlet-demo
当提示向应用程序添加路由时，按“N”。
当提示选择样式表格式时，按“ENTER”。

在 Visual Studio Code 中打开生成的应用程序

单击顶部菜单栏中的文件菜单，然后选择菜单选项打开文件夹。
在文件对话框中，导航到生成应用程序的文件夹。
在此文件夹中，您应该看到一个名为router-outlet-demo的文件夹。选择此文件夹并在文件对话框中单击打开。

设置项目

接下来就是安装Twitter Bootstrap和jQuery，并在项目中引用它们，这样就可以使用一些表单样式，让表单看起来更美观。

转到命令提示符并运行以下命令： cd router-outlet-demo
运行以下命令安装 jquery： npm i jquery
运行以下命令安装 Bootstrap： npm i bootstrap
在 Visual Studio Code 中，打开文件angular.json。
在src/style.css之前的样式数组中添加以下行。 “node_modules/bootstrap/dist/css/bootstrap.min.css”，
在脚本数组中添加以下几行： “node_modules/jquery/dist/jquery.min.js”、“node_modules/bootstrap/dist/js/bootstrap.min.js”
在 Visual Studio Code 中，打开文件src > index.html。
在 body 元素的第 10 行，添加以下类： class="container" 最终代码应如下所示：

      <body class="container">
  <app-root></app-root>
</body>
    

现在项目已全部准备好开发路由。

设置路由

在 Visual Studio Code 中，打开文件src > app > app.module.ts，删除现有内容，然后添加以下代码。此代码导入 Angular 的路由器模块并创建一个路由数组，您将在其中保存所有应用程序路由。

      import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
﻿
import { AppComponent } from './app.component';
import { NavBarComponent } from './nav-bar/nav-bar.component';
import {RouterModule, Routes} from '@angular/router';
﻿
const routes: Routes = [
];
﻿
@NgModule({
  declarations: [
    AppComponent,
    NavBarComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
﻿
    

开发 Home 组件

在命令提示符中运行以下命令： ng generate component home
在 Visual Studio Code 中，打开文件src > app > home > home.component.html，删除现有内容，并添加以下代码：

      <h1>Home Component</h1>
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Aliquam sem fringilla ut morbi tincidunt. Feugiat nibh sed pulvinar proin gravida hendrerit. Sed blandit libero volutpat sed cras ornare. 
Est lorem ipsum dolor sit amet consectetur adipiscing. Bibendum at varius vel pharetra vel turpis nunc eget. Vulputate dignissim suspendisse in 
est ante in nibh mauris. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Faucibus in ornare quam viverra orci sagittis eu volutpat. 
Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Arcu dictum varius duis at consectetur lorem donec massa. Turpis egestas pretium aenean 
pharetra magna ac placerat. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Faucibus scelerisque eleifend donec pretium. Vel turpis nunc 
eget lorem dolor sed viverra ipsum nunc. In fermentum et sollicitudin ac orci. Massa massa ultricies mi quis hendrerit dolor magna eget est. Sem integer vitae 
justo eget magna fermentum iaculis eu. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Nunc consequat interdum varius sit amet mattis.
</pre>
    

开发关于我们的组件

在命令提示符中运行以下命令： ng generate component about-us
在 Visual Studio Code 中，打开文件src > app > about-us > about-us.component.html，删除文件内容，并添加以下代码：

      <h1>About Us</h1>
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Aliquam sem fringilla ut morbi tincidunt. Feugiat nibh sed pulvinar proin gravida hendrerit. Sed blandit libero volutpat sed cras ornare. 
Est lorem ipsum dolor sit amet consectetur adipiscing. Bibendum at varius vel pharetra vel turpis nunc eget. Vulputate dignissim suspendisse in 
est ante in nibh mauris. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Faucibus in ornare quam viverra orci sagittis eu volutpat. 
Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Arcu dictum varius duis at consectetur lorem donec massa. Turpis egestas pretium aenean 
pharetra magna ac placerat. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Faucibus scelerisque eleifend donec pretium. Vel turpis nunc 
eget lorem dolor sed viverra ipsum nunc. In fermentum et sollicitudin ac orci. Massa massa ultricies mi quis hendrerit dolor magna eget est. Sem integer vitae 
justo eget magna fermentum iaculis eu. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Nunc consequat interdum varius sit amet mattis.
</pre>
    

开发导航栏

在命令提示符中运行以下命令： ng generate component nav-bar
在 Visual Studio Code 中，打开文件src > app > nav-bar > nav-bar.component.html，删除文件内容，并添加以下代码：

      <nav class="navbar navbar-expand-sm bg-dark">
    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Router Outlet Demo</a>
        </li>
        <li class="nav-item">
            <a [routerLink]="['/home']" class="nav-link" routerLinkActive="active"
                [routerLinkActiveOptions]="{exact:true}">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" [routerLink]="['/about']" routerLinkActive="active">About</a>
        </li>
    </ul>
</nav>
    

3. 在 Visual Studio Code 中，打开文件src > app > nav-bar > nav-bar.component.css并添加以下代码：

      li > a.active { color: #F97924 }

设置路线

在 Visual Studio Code 中，打开文件src > app > app.module.ts。
在路线数组中，添加以下条目：

      {path:'home', component: HomeComponent},
{path:'about', component: AboutUsComponent}
    

使用 router-outlet 组件

在 Visual Studio Code 中，打开文件src > app > app.component.html，删除现有内容，然后添加以下代码。通过这样做，您将把 router-outlet 组件添加到组合中，以便在其中呈现不同的路由。

      <app-nav-bar></app-nav-bar>
<router-outlet></router-outlet>
    

测试应用程序

现在您就可以使用 router-outlet 组件了。

在命令提示符中运行以下命令，以监视模式启动 Angular Development Server：ng serve
如果提示分享 Angular CLI 使用数据，请按“N”键表示不分享。
打开浏览器并在地址栏中输入以下 URL 来启动应用程序：https://localhost:4200。
请注意，导航栏中有两个链接，标题为“主页”和“关于”。
单击“关于”链接，注意导航栏下方的显示发生变化，显示“关于我们”组件的 HTML 。
单击返回主页链接，注意导航栏下方的显示发生变化，显示主页组件的 HTML 。

结论

恭喜！您已成功使用路由器出口向最终用户呈现不同的应用程序路由。有关更多信息，请访问Angular 中的路由器出口。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

在 Angular 中使用 routerOutlet 显示路由内容

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { NavBarComponent } from './nav-bar/nav-bar.component'; import {RouterModule, Routes} from '@angular/router'; const routes: Routes = [ ]; @NgModule({ declarations: [ AppComponent, NavBarComponent ], imports: [ BrowserModule, RouterModule.forRoot(routes) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

<h1>Home Component</h1> <pre> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam sem fringilla ut morbi tincidunt. Feugiat nibh sed pulvinar proin gravida hendrerit. Sed blandit libero volutpat sed cras ornare. Est lorem ipsum dolor sit amet consectetur adipiscing. Bibendum at varius vel pharetra vel turpis nunc eget. Vulputate dignissim suspendisse in est ante in nibh mauris. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Faucibus in ornare quam viverra orci sagittis eu volutpat. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Arcu dictum varius duis at consectetur lorem donec massa. Turpis egestas pretium aenean pharetra magna ac placerat. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Faucibus scelerisque eleifend donec pretium. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc. In fermentum et sollicitudin ac orci. Massa massa ultricies mi quis hendrerit dolor magna eget est. Sem integer vitae justo eget magna fermentum iaculis eu. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Nunc consequat interdum varius sit amet mattis. </pre>

<h1>About Us</h1> <pre> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam sem fringilla ut morbi tincidunt. Feugiat nibh sed pulvinar proin gravida hendrerit. Sed blandit libero volutpat sed cras ornare. Est lorem ipsum dolor sit amet consectetur adipiscing. Bibendum at varius vel pharetra vel turpis nunc eget. Vulputate dignissim suspendisse in est ante in nibh mauris. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Faucibus in ornare quam viverra orci sagittis eu volutpat. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Arcu dictum varius duis at consectetur lorem donec massa. Turpis egestas pretium aenean pharetra magna ac placerat. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Faucibus scelerisque eleifend donec pretium. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc. In fermentum et sollicitudin ac orci. Massa massa ultricies mi quis hendrerit dolor magna eget est. Sem integer vitae justo eget magna fermentum iaculis eu. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Nunc consequat interdum varius sit amet mattis. </pre>

<nav class="navbar navbar-expand-sm bg-dark"> <ul class="nav navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Router Outlet Demo</a> </li> <li class="nav-item"> <a [routerLink]="['/home']" class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Home</a> </li> <li class="nav-item"> <a class="nav-link" [routerLink]="['/about']" routerLinkActive="active">About</a> </li> </ul> </nav>