从AppModule到定制库的Angular 7路由
Angular 7是一种流行的前端开发框架，它提供了强大的功能和工具，帮助开发者构建现代化的Web应用程序。在Angular 7中，路由是一个重要的概念，用于管理不同组件之间的导航和页面跳转。
AppModule是Angular 7应用程序的主模块。它是整个应用程序的入口点，负责引导应用程序并加载其他模块。在AppModule中，我们可以配置应用程序的根路由。
路由可以看作是一种导航机制，它允许用户在应用程序的不同视图之间进行切换。在Angular 7中，路由器提供了一种声明式的方式来定义和管理路由。通过配置路由，我们可以指定哪个组件应该显示在哪个URL路径下。
要使用路由功能，我们需要在AppModule中导入RouterModule，并在imports数组中将其添加为一个依赖项。接下来，我们可以定义一个Routes数组，其中包含应用程序的不同路由配置。每个路由配置由路径（path）和对应的组件（component）组成。
例如，我们可以定义一个名为"home"的路由，路径为""（空路径），对应的组件为HomeComponent。这表示当用户在浏览器中访问根路径时，将显示HomeComponent。
除了路径和组件，我们还可以在路由配置中添加其他属性，如重定向（redirectTo）、子路由（children）、数据（data）等。这些属性可以根据应用程序的需求来定制路由行为。
除了在AppModule中定义路由配置，我们还需要在应用程序的模板文件中添加一个<router-outlet>标记。这个标记将用于动态加载和显示对应路由组件的内容。
总结一下，Angular 7的路由功能允许我们通过配置不同的路由，实现在应用程序的不同视图之间进行导航和页面跳转的功能。通过使用RouterModule和<router-outlet>标记，我们可以方便地集成路由功能到Angular 7应用程序中。
相关的腾讯云产品推荐：
相关·内容
我有一个使用Angular 7 CLI创建的定制库。我在库中有一个服务，用于处理需要向其中注入路由器的身份验证。我将RouterModule添加到imports集合，然后在我的应用程序(导入此自定义库)中，使用我的路由调用RouterModule.forRoot()。我一直从我的库中得到错误的"No provider
浏览 10提问于2019-03-16得票数 1
回答已采纳
我遇到了一些角度9的问题，不起作用。我的档案是这样的
routes.ts AppRoutesModule providers: [],})
export class AppModule:2: 1 -错误NG8001：‘路由器-出口’不是一个已知的元素:1。如果‘路由
浏览 2提问于2020-04-20得票数 1
回答已采纳
我有一些非常奇怪的行为，不知道它是从哪里来的。我想清理我的代码，因此我为每个组件创建了一个模块，并创建了一个处理所有路由的路由模块。/core';import { MatFormFieldModule} from '@angular/material如果我将login.
浏览 2提问于2020-07-31得票数 0
2回答
更新al模块后的迁移问题import { bootstrap } from '@angular/platform-browser-dynamic';import { AppModule } from '.().bootstrapModule(AppModule);
a
浏览 4提问于2016-08-30得票数 0
回答已采纳
1回答
我尝试使用Angular创建自定义web组件。文件中，并通过render2嵌入到主项目中。一切都会好的，但我想应用子路由器在web组件。下面是我的路由器{ path: 'services/apps/:id', component:ServicemainComponent,childrenngOnInit(): void {
console.log("initialNavig
浏览 0提问于2020-11-26得票数 0
我在一个项目下有两个离子应用程序和一个共享的angular库。假设网站(app 1)和仪表板(app 2)是两个离子应用。这两个应用程序有两个不同的用户界面。我想在这两个应用程序之间导航。当您从app1导航到app2时，它应该加载app2，而不是作为app 1的离子路由器出口中的一个组件，而是作为一个完整的新UI (就像您独立运行app 2一样)，反之亦然。providers: provider }
浏览 13提问于2021-01-08得票数 1
回答已采纳
当我尝试加载angular 2.0应用程序时，我得到以下错误：(索引)：21错误:错误:由模块'AppModule‘导入的意外值'object Object’键入用于引导的脚本import { AppModule } from '.success`))
.catch(error =>
浏览 1提问于2016-09-25得票数 7
我不知道为什么会发生这样的事情。根据我所看到的，我正确地导入了所有内容。我已经问过其他问题了，并且已经看过很多次了。我可能遗漏了一些非常简单的东西，只是没有看到而已。我能得到一些关于为什么我得到这个错误的帮助吗？app.module.tsimport { NgModule } from '@angularMaterialModul
浏览 2提问于2018-03-23得票数 1
回答已采纳
我已经使用angular CLI创建了一个模块，但在创建时忘记添加--routing，现在我想向它添加一个routing模块。ng init --routing在angular CLI版本1.1.1中不起作用
浏览 11提问于2017-07-09得票数 49
回答已采纳
3回答
我想用url http://localhost:4200/popup/{param}开发一个带有角的页面。我将向我的客户端公开此页面，例如，客户端上有一个按钮(客户端的应用程序不是角型应用程序)，当他单击该应用程序时，它用url http://host/popup/44444444打开页面( 44444444所以问题是，我怎样才能在我的应用程序中获得param呢？我更改了基本的href <base href="
浏览 5提问于2022-08-28得票数 0
我有以下路由配置： { path: '', children: [outlet: 'overlay' ]];
我的想法是，我有一个组件，谁有一个覆盖路由出口，显示不同的出口在主页上。然而，这并不起作用，我
浏览 0提问于2017-08-27得票数 1
1回答
我是angular的初学者，我参加了一次培训，我进入了路由系统，我通过命令ng g m routes --routing创建了路由系统，我声明了路由，我通过<router-outlet></router-outlet>更改了标记<home></home>，没有什么值得展示的。} from '@angular/common/http';
import { NgMod
浏览 2提问于2022-03-04得票数 -1
回答已采纳
1回答
我已经创建了一个角度应用程序版本7和项目结构是这样的。app模块有app-routing.module.ts，仪表板模块有仪表板路由module.ts。在仪表板模块中，布局组件路由有子组件，即home和admin。AppModule应用程序-路由模块：
import { NgModule } from '@angular/c
浏览 0提问于2018-12-10得票数 3
回答已采纳
4回答
我想在我的Nx工作区中添加@angular/fire (角应用程序)。还是我漏掉了什么？- Is there a specific 'Nx way' of installing it?
在AppModule
浏览 7提问于2021-02-18得票数 3
4回答
我正在开发一个带有三个components.Is的小角度项目，该项目有一个名为component.module的子模块，我在该模块中添加了路由，component.module包含到App.module我的项目文件夹结构是这样的。import { RouterModule, Routes } from "@angular/router";
import
浏览 2提问于2018-10-14得票数 7
回答已采纳
在更新到RC6之后，我的应用程序在运行时遇到了一些问题。
由于官方示例，我更改了系统to。但我仍然会遇到这样的编译错误："Module '"D:/Myproject/WebClient/node_modules/@angular/router/index"‘没有导出的成员’路由器_指令‘“。看起来编译器采用默认的index.js文件，而不是umd包.编译是通过gulp任务完成的</
浏览 3提问于2016-09-01得票数 6
回答已采纳
我是Angular的新手，刚刚发现了Stackblitz。我正在尝试实践路由的概念。有没有办法让终端显示在Stackblitz中，以便将路由添加到项目中？我知道你可以用鼠标右键添加组件，服务，指令等等，但是有没有路由的东西，或者你必须手动去做呢？
我试着查了一下，但所有的搜索结果都链接到了一个stackblitz项目。
浏览 7提问于2021-07-18得票数 0
我把我的AppRoutingModule放在imports of @NgModule of AppModule类中。AppRoutingModule的定义是这样的： { redirectTo:它不应该只重新加载<router-outlet>的内容吗？也许这意味着我的布局是这样的：
// AppCo
浏览 2提问于2017-05-06得票数 6
我的路由如下所示。 { path:'step1',component: Step1Component }app.module的定义如下: [ AppComponent ],
浏览 2提问于2016-09-16得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
