Angular 4.X:初始化子组件路由器
Angular 4.X是一种流行的前端开发框架，用于构建单页应用程序。它基于TypeScript编程语言，并提供了一套强大的工具和功能，使开发人员能够快速构建可扩展和高性能的Web应用程序。
初始化子组件路由器是Angular中的一个重要概念，它允许我们在父组件中定义一个路由器，并在子组件中使用该路由器进行导航。通过初始化子组件路由器，我们可以实现更灵活的页面导航和组件重用。
在Angular中，我们可以通过以下步骤来初始化子组件路由器：
- 首先，在父组件的模板中定义一个占位符，用于显示子组件的内容。例如，可以使用
<router-outlet></router-outlet>标签作为占位符。 - 在父组件的路由配置中，定义子组件的路由路径和对应的组件。例如，可以使用以下代码片段定义一个子组件的路由路径：
const routes: Routes = [
{ path: 'child', component: ChildComponent }
];- 在父组件的模块文件中导入
RouterModule和Routes，并使用RouterModule.forRoot(routes)方法初始化路由器。例如，可以使用以下代码片段初始化子组件路由器：
import { RouterModule, Routes } from '@angular/router';
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }- 在子组件的模板中，可以使用路由链接指令来导航到其他组件。例如，可以使用
<a routerLink="/child">Child Component</a>标签来导航到子组件。
通过以上步骤，我们可以成功初始化子组件路由器，并实现在父组件中导航到子组件的功能。
关于Angular 4.X的更多信息和详细介绍，您可以参考腾讯云的相关产品和文档：
相关·内容
1回答
Angular2第二级子路由到根而不是第一个子节点
angular、angular-routing
我正在尝试创建一个多级路由层次结构。就像这样：
app
|---core
|---items
我的应用程序路由器和html如下：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{path: 'core', loadChildren: 'app/core/core.module#CoreModule'}
]
浏览 2提问于2017-05-30得票数 2
回答已采纳
2回答
在嵌套子组件中使用辅助路由
angular、angular2-routing、angular2-router3
我试图在一个类似于发布的问题的子组件中使用。由于发布的“解决方案”更像是一种解决办法，我很好奇如何像上面的博客中那样做。
我用的是角2.1.2和路由器3.1.2。
parent.module
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
imp
浏览 5提问于2016-11-20得票数 7
1回答
导航时角2路由隐藏选择器
javascript、angularjs、typescript、routing
在我的应用程序组件html中，我有一个选择器和路由器出口。当我试图通过单击链接导航时，选择器仍然存在。我怎么把选择器藏起来？只有路由器-插座应该显示。
app.component.html
<nav>
<a [routerLink]="['/heroes']">Click here</a>
</nav>
<router-outlet></router-outlet> <-- Display the content here
<feed></feed> &
浏览 1提问于2017-06-29得票数 0
回答已采纳
1回答
离子惰性加载子数组中的模块
angular、ionic-framework、lazy-loading、angular-routing、ionic4
我有一个离子应用程序，在Page module下面有一个List Page Module和一个Subdir Page Module。下面是文件夹结构-> list/subdir.
problem ：当我导航到localhost:8100/list/subdir而不是Subdir page加载时，我遇到了总是加载List page module的问题。
Outcome：我希望在导航到localhost:8100/list/subdir时加载Subdir page；但它加载的是List page。我只想在URL为localhost:8100/list时加载List pa
浏览 54提问于2019-06-05得票数 1
1回答
父链接如何在角，然后单击子链接获得其他样式
angular、styles、router、routerlinkactive
我需要做家长链接。我说了，但肯定是对的。当我单击routerLinkActive=“路由器-类”时，子链接和父链接可以得到类“路由器-类”，但是当我单击子链接-父链接时必须更改get类routerLinkActive=“路由器-类-其他类型”，如果我用单击的链接发送链接，样式必须是怎样的，它是怎样做的？
<nav class="menu-container">
<div class="container" >
<ul class="nav navbar-nav" >
<a id="
浏览 3提问于2022-06-20得票数 0
3回答
整页导航角4
javascript、angular、angular-router
我刚接触到棱角，并开始掌握路由和组件的窍门。不过，我有一个问题，就是：
如何导航到第二个页面(组件)，只显示该内容，而不只是将组件数据加载到<router-outlet></router-outlet>中。
单击该按钮时，希望整个页面只显示第二个组件数据。我基本上想知道我如何能够在角4的整个页面导航。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'
浏览 3提问于2017-11-19得票数 0
2回答
无法通过Angular中的布线显示组件
javascript、angular、angular-routing、angular-components
我有3个组件: A、B和C。我想在组件A中显示一个名为"Component B“的按钮。单击该按钮后，它将显示B组件，并带有一个链接"Component C”。单击链接时，它应该显示c组件，其中显示"C组件工作“ 应用程序模块是： import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.m
浏览 18提问于2020-07-03得票数 1
回答已采纳
1回答
如何用角覆盖布线出口？
angular、angular-ui-router、angular2-routing、multipleoutputs
我想在角8应用程序中为页眉、页脚、左侧和主要内容制作通用布局。
我不想重新加载页眉，页脚和左侧时，每次用户导航从一个页面到另一个页面，除了一些页面，如登录，联系我们。
我的一些基本代码如下所示
app.componant.html
<div>
<router-outlet name="header"></router-outlet>
<div>
<router-outlet name="leftMenu"></router-outlet>
浏览 2提问于2020-01-29得票数 0
1回答
Angular 4-子路线和使用两个路线网点
angular、typescript、angular-ui-router、angular4-router
我已经在门户网站上阅读了关于这个问题的所有解决方案，但找不到正确的解决方案。事情是这样的：
我有一个组件：
import {Component} from '@angular/core';
@Component({
selector: 'component-one',
template: 'Component One'
})
export class ComponentOne {
}
和两个子组件：
import { Component } from '@angular/core';
@Component({
浏览 9提问于2018-12-14得票数 1
1回答
如何在角度上添加用户导航和管理导航
angular、navigation
我想分开管理和用户导航的角度项目，就像电子商务网站。但是子路由并不适用于仪表板或用户。当我单击仪表板内的报表路由时，它会出现错误。这是我的代码
app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './admin/dashboard.component';
import { HomeC
浏览 2提问于2020-02-20得票数 0
7回答
Angular 2路由重定向到具有子路由
angular、routing、children
我是Angular 2的新手。我想为我的应用程序的每个部分创建独立的模块。例如，我使用default AuthModule - AuthComponent创建了组件，其中包含他的子组件(SignIn或SignUp)的router-outlet。因此，我想要实现以下场景：
导航到/-根目录关闭应用程序-重定向至/auth 后重定向至/auth-使用路由器插座加载AuthComponent加载在加载AppComponent后-通过重定向到AppComponent加载默认登录组件
但是当我转到localhost/时，我会重定向到我想要的/auth，但是下一个重定向到登录没有出现。
我的代码：app.
浏览 194提问于2017-03-18得票数 46
1回答
填充子路由器-插座Angular2
angular、angular2-routing、router、angular2-template
因为我听说Angular的Router支持嵌套标签，所以我尝试使用其中的两个。我正在使用最新的Angular-CLI，正在从ui-router转换到Angular的Router。我无法获得第二个router-outlet来填充内容。
(父路由工作正常) app-routing.module.ts
...
const routes: Routes = [
{ path: '', pathMatch: 'full', component: LoginComponent },
{ path: 'login', pathMatch: &#
浏览 4提问于2017-03-06得票数 17
回答已采纳
2回答
在Angular 8中使用共享组件的延迟加载
html、angular、typescript、angular-routing
我就是找不到这个问题的答案。我正在使用导航栏创建一个简单的主页，但我将导航栏添加为共享组件，这样我就可以在其他组件中重用它。
问题是，当我尝试使用导航栏延迟加载新的路由时，导航栏无法加载该路由。
这是我的代码：
Ng --版本：
Angular CLI: 8.2.2
Node: 10.13.0
OS: win32 x64
Angular: 8.2.8
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynami
浏览 22提问于2019-10-25得票数 1
回答已采纳
2回答
有多个路由和路由器出口的角路由
angular、routes、angular-routing、router-outlet
除了应用程序根的导航之外，我还试图将导航添加到组件，但它没有导航到组件路由。
我用的是两个路由器插座：
应用程序根的路由器出口(app.component.html)
用户路由器出口组件(users.component.html)
有两条路线：
应用程序的路由(app.routing.module.ts)
用户路由(users.routing.module.ts)
当导航到“users.component.html users”时，我可以看到带有两个链接的，但是当按下"list“链接时，它不会导航到users.routing.module.ts中定义的：
浏览 1提问于2018-08-10得票数 6
回答已采纳
1回答
在Angular router中未隐藏父组件
angular、typescript、router、angular-router、angular-load-children
我有一个appComponent，在其中我可以显示工具栏、页脚和主要内容。此主要内容使用router-outlet指令。大概是这样的 <div class="h-100">
<app-toolbar></app-toolbar>
<app-breadcrumb></app-breadcrumb>
<div class="container h-100">
<router-outlet></router-outlet>
&l
浏览 35提问于2020-10-27得票数 0
回答已采纳
1回答
角路由器未定义
angular
我有两个错误。
1)路由器-出口不是下列代码的已知元素
import {Routes, RouterModule}from "@angular/router"
@Component({
selector: 'app-root',
template: `
<top-menu></top-menu>
<router-outlet></router-outlet>
`
})
2)用于下列代码的意外结束标记<a>
import {Routes, RouterModule} fro
浏览 2提问于2017-07-12得票数 1
2回答
角4嵌套路由器出口
angular
我在AppComponent中有一个路由器插座，它可以很好地加载子组件。其中一个子组件有多个子组件，我希望将所有子组件加载到父路由器出口中，如下所示
AppComponent <router-outlet> (This loads all child including products)
Customers (component)
Pricing (component)
Products (component) <router-outlet name="products"> (This should load child produ
浏览 1提问于2018-03-09得票数 3
回答已采纳
3回答
为什么在同一页中打开新组件？
angular、routerlink
我是新的角度，我已经创建了两个组件非常简单的应用程序，我只是想从一个导航到另一个。
但是第二个组件在相同的组件中打开(在第一个组件下面)。我怎么开第二台呢。在新的一页？
这是我的密码
<td> <a routerLink="devicelist">Privacy Policy</a> </td>
<div>
<router-outlet></router-outlet>
</div>
app-route.module.ts文件
import { NgModule } from &
浏览 3提问于2019-12-26得票数 0
回答已采纳
2回答
如何在主干线上装载新线路
javascript、angular、angular2-routing、angular2-modules
目前我对角质还不熟悉。我正在学习路由主题，但似乎停留在我想要在主路由中加载新路由的点上。我的app.module看起来就像
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {HttpModule} from '@angular/http';
import {
浏览 8提问于2017-09-02得票数 0
回答已采纳
1回答
Angular 4- lazy加载模块路由也不起作用
angular、angular2-routing、angular4-router
我的问题是，子路由器不工作。应用程序模块加载DashboardModule (并且标题也将显示)。问题从这里开始。报头中的路由器链路不想加载其他组件。我想要什么？路由器链路显示路由器插座之间的"sub“组件。谢谢你的帮助。
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule, ExtraOptions } from '@angular/router';
import { LoginComponent }
浏览 0提问于2017-10-26得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
