如何在Angular中路由到子路由？
在Angular中，可以通过路由来实现子路由的导航。以下是在Angular中路由到子路由的步骤：
- 首先，在Angular应用的根模块（通常是AppModule）中导入
RouterModule和Routes。
import { RouterModule, Routes } from '@angular/router';- 在根模块中定义子路由的组件。
import { ChildComponent } from './child.component';
const routes: Routes = [
{ path: 'child', component: ChildComponent }
];- 在根模块中使用
RouterModule.forRoot()方法来配置路由。
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppModule { }- 在父组件的模板中添加一个用于导航到子路由的链接。
<a routerLink="/child">Go to Child</a>- 在父组件的模板中添加一个用于显示子路由组件的占位符。
<router-outlet></router-outlet>- 创建子路由组件的模板和逻辑。
import { Component } from '@angular/core';
@Component({
selector: 'app-child',
template: '<h1>Child Component</h1>'
})
export class ChildComponent { }通过以上步骤，就可以在Angular中实现路由到子路由的功能。当点击父组件中的链接时，Angular会加载并显示子组件的内容。
相关·内容
在我的angular2应用程序中，我有一个全局路由器，它可以导航许多功能，例如主页和教程。现在，在我的教程组件中，我想设置另一个路由器来导航不同的步骤。
因此，从全局来看，以下是我的文件：
//main.ts:
// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// The app module
import { AppModule } from './app.module';
浏览 11提问于2016-08-10得票数 2
我希望通过单击父组件的按钮将数据传递给子组件，并在angular 5中将子组件呈现为一个单独的页面，而不是在父组件的模板中呈现子组件。
假设我的子组件是'AstronautComponent‘，当我添加时，
<app-astronaut *ngFor="let astronaut of astronauts"
[astronaut]="astronaut">
</app-astronaut >
这是在父模板中，它在同一页上显示子模板，而不是单独的输入。我能够从父模板到子模板中获取数据，但在相同的父模板上。我使用@ page.A
浏览 2提问于2018-09-05得票数 0
1回答
我有这样的模块层次结构：
app
-- module1
- submodule1
- submodule2
我想知道如何实现从子模块到模块的路由，以及从模块到主应用模块的路由。
到目前为止，我可以从模块路由到主应用程序模块，如下所示：
app.module.ts -主模块
...imports
@NgModule({
declarations: [
AppComponent
],
imports: [
...
AppRoutingModule,
//Feature Modules
Module1,
],
provid
浏览 3提问于2017-05-14得票数 1
1回答
在Angular2中，是否可以显示，只需在浏览器中路由，而不使用任何Angular2组件？RouterModule.forRoot中的某种忽略
浏览 1提问于2016-12-26得票数 1
回答已采纳
我使用的是Angular 1.5.8和angular-ui-router 0.3.2。我需要在每次路由更改时解析身份验证方法。
我不想为每个路径添加resolve属性，因此我在App.run中创建了此属性
//check permissions
$rootScope.$on('$stateChangeStart', function (evt, toState) {
if ($localStorage.token || toState.authenticated) {
$http.defaults.headers.common = {
浏览 8提问于2017-02-18得票数 3
我想实现标签和内部标签路由到一个carousel.Can，任何人提供我的代码样本，因为我是新手的Angular JS，并且在Angular JS.Here bootstrap中实现标签内部路由有问题，也可以在Angular JS中使用。
浏览 0提问于2014-11-20得票数 0
1回答
我有一个带有管理页面的项目(见下面的文件结构)。我需要创建一个名为“createuser”的子路由到管理页面(localhost:4200/ admin /createuser)。我尝试了几种方法，但是它显示了一个错误(无法找到加载‘CreateComponent’的主出口)。因此，我在我的管理组件html中添加了路由器出口。现在，路由代码可以工作，但是来自管理页面的html显示在'createuser‘页面中。如何避免这种情况？还是我错过了什么？
admin.component.ts
import { Component, OnInit } from '@angular/co
浏览 9提问于2017-02-15得票数 0
回答已采纳
我有一个angular2 active guard，如果用户没有登录，它会处理，重定向到登录页面：
import { Injectable } from "@angular/core";
import { CanActivate , ActivatedRouteSnapshot, RouterStateSnapshot, Router} from "@angular/router";
import {Observable} from "rxjs";
import {TokenService} from "./token.service&
浏览 2提问于2017-04-19得票数 90
回答已采纳
1回答
离子惰性加载子数组中的模块
、、、、
我有一个离子应用程序，在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
我是angular 4的新手。我发现在angular中有一种方法可以使用@Input将数据从父组件传递到子组件，如下所示：
<child [dataToPass]="test"></child>
我的问题是如何使用路由器做同样的事情。在路由器中，没有像输入这样的子定义；它只有<router-outlet></router-outlet>，那么如何使用@Input传递数据呢？
浏览 0提问于2017-09-28得票数 2
2回答
我已经开发了一个Angular2应用程序使用路由。
我的问题是：
我有一个登录页面，其中有不同的HTML和CSS.Once成功登录，我重定向到另一个页面有不同的HTML和CSS。但是我的主要布局是index.html(登录页面)。因此，我需要了解如何使用多个布局？
我做过一些研发工作，但我不知道如何实施？
请查找以下代码：
1) app.routing.module
import { NgModule } from '@angular/core';
import { Routes, Router, RouterModule } from '@angular/router
浏览 8提问于2016-12-13得票数 0
回答已采纳
当使用angular2的路由器"3.0“的子路由时，不需要在父路由器配置中声明它们(以前，您必须在父组件中执行类似/child...的操作)。
我想要配置一个全局的“页面找不到”处理程序，我可以这样做：
{ path: '**', component: PageNotFoundComponent }
在我的应用路由模块中。
注意:如果我这样做，路由器将导航到在PageNotFoundComponent之前在应用程序路由模块中声明的路由。但当我尝试访问子路由(在某些子路由模块中使用RouterModule.forChild声明)时，它总是导航到通配符路由。
直观地说，通配
浏览 0提问于2016-10-13得票数 37
回答已采纳
2回答
如何在主干线上装载新线路
、、、
目前我对角质还不熟悉。我正在学习路由主题，但似乎停留在我想要在主路由中加载新路由的点上。我的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
回答已采纳
我正在尝试在angular.js应用程序的基础上构建一个angular混合应用程序。我正在遵循官方文档()。我完成了这一步：。
我使用angular ui-router 0.3.1来处理我的应用程序的路由。因此，使用我的主模块上的配置函数和$stateProvider服务，我已经将每个路由映射到一个angular.js控制器和一个由templateUrl参数指定的模板。
我的应用程序似乎正确启动，但无法加载模板，因为找不到它们(404错误)。这是正常的，因为当我使用ng build angular-cli命令行时，它们不会导入到构建应用程序的dist文件夹中。
我如何配置我的应用程序，以便当我
浏览 14提问于2018-02-15得票数 0
我刚接触angular2，我想学习一件简单的事情，那就是如何在两个组件之间交换数据，我得到了一种在父组件和子组件之间交换数据的方法，但我尝试的是在我的应用程序组件中，我将它路由到不同的组件，所以我如何传递数据。
我想要做的是:在我的应用程序组件中，我从下拉列表中选择一个值，然后尝试访问我的appcomponent.html中的下一个组件
<li role="presentation"><a class="onmousehover" routerLink="recycle"><b>Recycle</b>
浏览 0提问于2017-11-09得票数 0
3回答
整页导航角4
、、
我刚接触到棱角，并开始掌握路由和组件的窍门。不过，我有一个问题，就是：
如何导航到第二个页面(组件)，只显示该内容，而不只是将组件数据加载到<router-outlet></router-outlet>中。
单击该按钮时，希望整个页面只显示第二个组件数据。我基本上想知道我如何能够在角4的整个页面导航。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'
浏览 3提问于2017-11-19得票数 0
1回答
我已经在门户网站上阅读了关于这个问题的所有解决方案，但找不到正确的解决方案。事情是这样的：
我有一个组件：
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回答
我试图在我的角度11中使用创建面包屑，我试着理解这个文档并根据我的理解实现它。
根据上面的GIF，我错过了第二页和第三页之间的连接。
期望
用户列表->用户仪表板->已完成列表
当单击用户仪表板时，我应该回到用户仪表板页面，然后是用户列表。
电流行为
当我单击卡片(单击已完成列表btn或已完成列表btn)时，用户仪表板消失。我不知道我失踪了什么地方。
团队，因为没有添加stackblitz，因为某些原因我被阻止访问stackblitz或任何代码沙箱
到目前为止我已经
app.routing.ts
import { HomeComponent } from './c
浏览 21提问于2022-03-21得票数 0
回答已采纳
我试图导航到角度6中的另一页。
在Ionic中，我们通过调用navCtrl.push('ExamplePage')来实现它；
在第六角中，我知道它们是路线，但我不能使用这样的按钮导航：
app.component.html
<button (click)='goToExamplePage()'>ExamplePage</button>
<router-outlet></router-outlet>
app.component.ts
import {Router} from '@angular/router
浏览 1提问于2018-09-20得票数 3
2回答
您好，我正在尝试在已嵌套的路由中创建嵌套路由。在合成中，我有一个门户，其中包含我的侧边栏和其他一些奇特的东西，在那里我可以导航到集群。从集群中，我应该能够选择一个集群并查看其详细信息。
我的“祖父母”路由称为"portal“，而父”cluster“称为”cluster“。下面是clusters-route的代码
(function () {
'use strict';
angular.module('ap.clusters.RouteConfig', ['blocks.router','ncy-angular-bread
浏览 3提问于2015-02-14得票数 1
我尝试在href中连接Laravel路由和angular路由，如下所示：
<a href="./home/#/orders">Orders</a>
当我悬停链接时，它会显示正确的url：
localhost/myproject/home/#/orders
但当我点击该链接时，它会将我重定向到以下链接：
localhost/home/#/orders
它将从链接中删除项目名称。
这是laravel路由：
Route::group(['namespace' => 'Frontend'], function(){
浏览 1提问于2016-07-13得票数 0
我的问题是如何路由到子文件夹(angular)以返回ASP.net MVC项目的views文件夹中的HTML文件。
浏览 0提问于2016-10-19得票数 0
我使用的是带有最新ui路由器的angular 1.3.11。
当我通过以下方式将$scope或常量注入到DateplannerController中时：
'use strict';
angular.module('test').controller('DateplannerController', function (stateConfiguration, $scope, $state) {
});
则未定义stateConfiguration和$scope。
为什么？
.state('main.projects.selected
浏览 2提问于2015-02-07得票数 0
我有个问题：
基于跟踪，我的代码在错误的地方查找路由器模块，它应该在我的node modules\@angular文件夹中查找，但它在我的src\app\文件夹中查找，如何修复？
我是怎么到这里来的
我已经使用角cli安装了角2，当我使用路由器模块创建我的路由时，我导入它如下：
import { RouterModule } '@angular/router/src/router_module';
然后用它经过我的路线如下：
export const routing = RouterModule.forRoot(APP_ROUTES, {enableTracing: true}
浏览 6提问于2017-12-05得票数 2
回答已采纳
5回答
我的组件会显示出来，但是在加载页面时我会收到一条错误消息。在查看了一堆资源之后，我似乎根本解决不了错误消息。
错误
EXCEPTION: Error: Uncaught (in promise): Cannot match any routes. Current segment: 'index.html'. Available routes: ['/login'].
main.component.ts在index.html中，一旦页面加载，它就会显示上述错误消息。
import { Component } from '@angular/core'
浏览 13提问于2016-06-08得票数 27
回答已采纳
我在试着让我的角度路线变懒。我已经在另一个应用程序中获得了一个工作版本，据我所知，它是以相同的方式实现的--但是它根本不起作用。没有错误，只有一个空的<router-outlet>。
这是我的app.module.ts。SharedModule和EntityViewsModule包含共享组件：
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
SharedModule,
EntityView
浏览 2提问于2017-04-21得票数 1
回答已采纳
1回答
UI-路由器文档显示，您可以在路由名称中使用点：
但是，在我的应用程序中，这是行不通的。这是一个很好的例子，直到我将client改为client.ts everywhere：
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>AngularJS: UI-Router Quick Start</title>
<!-- Bootstrap CSS -->
<link href="//cdnjs.cloudfla
浏览 0提问于2014-10-17得票数 4
回答已采纳
1回答
如果输入无效路径，是否可以将Angular2路由器配置为重定向到特定路由？
例如，如果我有三个路由：
/home
/about
/404
然后我输入/trains (一条路由，不在路由配置中)，我希望路由器将我重定向到404。
浏览 0提问于2015-12-11得票数 27
回答已采纳
我正试图在我的angular2应用程序中进行路由选择。我只是试着跟踪。
但在app.routing.ts中：
import { Routes, RouterModule } from '@angular/router';
它抱怨的：
node_modules/@angular/router/index"' has no exported member 'Routes'.
和
node_modules/@angular/router/index"' has no exported member 'RouterModu
浏览 5提问于2016-08-24得票数 1
3回答
我有一个具有登录组件和仪表板组件的Range6应用程序。正在尝试导航到登录按钮上的DashboardComponent，单击事件。DashboardComponent包含一个名为WardComponent的子组件。但是，当导航到仪表板时，它只呈现子组件ward.How以外的内容，我可以在登录后用子组件呈现仪表板组件吗？
请参阅下面的组件类。
AppComponent
<router-outlet></router-outlet>
LoginComponent.ts
export class LoginComponent {
constructor(private
浏览 2提问于2018-11-30得票数 0
回答已采纳
2回答
我正在尝试让我的路由在我的Angular 2应用程序中工作。
下面是我在app.routes.ts文件中使用的代码
export const ROUTES: Routes = [
{ path: '', component: PublicComponent, data: { title: 'Heroes List' } },
{ path: 'home', component: PublicComponent },
{ path: 'admin', component: PrivateComponent,
浏览 0提问于2017-06-17得票数 8
回答已采纳
2回答
我对angular.js的ui路由器有问题.我目前正在使用angular.js进行一个项目，并使用ui路由器作为路由器。现在的问题是，我想要一个嵌套视图，如下所示：
views/settings/index.html (也是以前在ui-路由器中创建的模板)
<div class="settings">
[...]
<div class="settings-content" ui-view="content"></div>
</div>
app.js
$stateProvider.state(
浏览 3提问于2014-12-23得票数 1
回答已采纳
1回答
我似乎无法通过路由来处理角2中的子程序。这个应用程序是我的第一个角2应用程序，它非常简单，顶部有一个导航条，应该在页面的下部填充内容。每当我点击任何导航链接，它们都导航到同一个子页面，更糟糕的是，子程序堆栈的内容更糟，这意味着我单击一次，子程序加载到下面，我再次单击它在下面加载，所以我有两次，等等。
完整的内容可以在这里找到：
这是我的searches.routing.ts文件：
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angu
浏览 0提问于2016-09-04得票数 7
回答已采纳
在创建Angular 7应用程序时，我定义了一个用于不同实体的表单组件。 为此，我创建了一个变量路由： {path: ':entity/create', component: FormComponent} 这项工作很好，但根据我想要创建的实体，我必须加载不同的对象。 所以我尝试在Angular中使用变量类名来实例化一个类。 我试着去做： var object = eval('new myObject()'); 但是我得到了这个错误信息： ERROR Error: "Uncaught (in promise): ReferenceError: myO
浏览 11提问于2019-03-21得票数 3
我用Angular CLI创建了我的Angular应用，但现在我在路由器上遇到了问题。我要构建的应用程序有一些页面有页眉和页脚，但也有一些页面没有，例如登录页面。所以我需要一种方法来与需要的页面共享页眉和页脚的布局，并对不需要的页面使用其他布局。
我的第一个想法是有一个具有页眉和页脚的路由，它将成为所有其他需要它的路由的父级，但我找不到一种方法来在多个路由模块之间共享相同的父级。我能在文档中找到的指定父子关系的唯一方法是在定义路由时通过子列表，但然后我需要在相同的位置定义所有路由，这是我想要避免的。
第二个想法是使用次要路由，我尝试使用主要出口来定义app.component.html，并为页
浏览 1提问于2017-04-22得票数 2
// Angular module import
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RouterModule, Routes } from '@angular/router'
import { NavComponent } from './nav/nav.component'
import { siteComponents } from '
浏览 4提问于2017-06-19得票数 1
回答已采纳
是否可以在地址栏中显示angular 2和angular 4中特定路由的状态名称。例如，我有以下路由配置，
{
path:"animals",
component : AnimalComponent,
children:[{
path:"cat",
component:CatComponent
},{
path:"dog",
component:DogComponent
}]
}
当地址为“动物/猫”时，加载AnimalComponent路由器出口中的CatComponent，当地址为“动物/狗”时，加载Animal
浏览 6提问于2017-07-17得票数 0
回答已采纳
我正在为一个SaaS应用程序的登录页编写一个角度应用程序。SaaS使用URL http://localhost:4200/token=<token>重定向到angular应用程序，并且angular迅速更改为主组件http://localhost:4200/#/。
我需要获取要在代码中使用的<token>的值。如何在angular应用程序中复制初始URL？
浏览 0提问于2021-09-20得票数 0
如何获得用户试图在角2中的canActivate保护中打开的路由？
我如何让警卫监视每一个路线参数的变化。改变路线内的身份？
import { Injectable } from '@angular/core';
import {Observable, Observer, Subject} from "rxjs/Rx";
@Injectable()
export class RightsGuard implements CanActivate {
constructor(
private router: Router,
浏览 3提问于2017-02-11得票数 1
2回答
我有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
回答已采纳
我在一个Angular4应用程序中工作，我正在尝试将值从子组件传递到父组件。.I已经实现了一些东西，但我无法获得预期的输出。
子组件映像...
下级组件编码...
<div class="row">
<div class="col-3">
<input type="text" readonly class="form-control col-8 text-center bg-white font-weigh
浏览 0提问于2018-03-12得票数 11
回答已采纳
我正在试图找出安古拉2的路由器的OnReuse和CanReuse部分，我正在撞墙。我将代码建模为docs ，但由于某种原因，当路由发生变化时，我无法获得调用的方法。不知道我做错了什么。这是我的密码：
app.component.ts
import {Component, OnInit, NgZone, View} from 'angular2/core';
import {Location, RouteConfig, RouterLink, ROUTER_DIRECTIVES} from 'angular2/router';
import {ProductTab
浏览 6提问于2016-03-28得票数 1
嘿。谁能解释一下如何部署Angular + Laravel应用程序？我已经创建了一个以Angular作为前端和Laravel作为api的应用程序，现在我对如何部署我的应用程序感到困惑。是否应该将Angular "dist"文件夹中的所有捆绑包复制到Laravel应用程序的"public"文件夹中？我应该使用公用文件夹中的Angular index.html，还是应该离开index.php文件？
提前谢谢。
浏览 2提问于2021-07-06得票数 0
我有一个AlertComponent，我想在AppComponent中使用它作为指令，并公开它，这样它就可以(作为一种单例)提供给来自AppComponent的所有路由/子组件。但是，我似乎找不到一种方法来获取作为指令使用的AlertComponent对象实例，以便调用它的方法并查看对该指令所做的更改(即将警报添加/删除到/从页面中删除)。
以下是AlertComponent：
import { Component } from 'angular2/core';
import { Alert } from './model';
@Component({
浏览 1提问于2016-05-10得票数 1
回答已采纳
2回答
angular4路由器存在一些问题。
我已经创建了一个菜单项列表，并从后端获得了用于路由器链路创建的对象，但是如果menuItem.link等于mypath/，它将被角到mypath%2F替换，如果我在这个项目中单击这个例子。
因此，路由无法工作，因为它不能匹配任何路由，因为我已经为(mypath/示例)定义了路由。
<a [routerLink]="['/', menuItem.link, menuItem.id]" routerLinkActive="active_link">
我尝试过将/*添加到路由器链接中，但它仍然不起作用。
浏览 3提问于2017-07-28得票数 4
我正在开发一个Angular2应用程序，我注意到子路由不是从父路由扩展的。这是故意的吗？
例如，如果我的父路由器的路由配置如下：
// In top-level component
router.config([
new AsyncRoute({
path: '/designer/:id',
name: 'Designer',
loader: () =>
System.import('app/components/design.component')
浏览 3提问于2016-05-06得票数 0
我有一个带有ngRoute的简单的角应用程序，定义了一个单一的路由，默认重定向到相同的路径(在index.html中)：
<script src="http://code.angularjs.org/1.2.14/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script>
var app = angular.module('my
浏览 1提问于2015-12-08得票数 0
回答已采纳
用户可以使用我的angular项目创建我的根域的子域。因此，我们使用通配符子域来创建子域。我们是nginx。现在，我们的要求是，如果用户想要一个自定义子域，那么他应该能够指向他的自定义子域与我们的通配符子域。我们如何才能做到这一点？ 例如:用户有子域user.abc.com，我们提供*.xyz.com。用户创建了一个子域hello.xyz.com，现在他想将其user.abc.com重定向到hello.xyz.com。我们如何使用nginx实现此场景。
浏览 17提问于2021-11-22得票数 0
我在一个使用angular-route的应用程序中，我试图将ui-router集成到一个特定的模块中。在这个模块中，我没有包括angular-route。
ui-sref urls都会生成很好的结果，但是当用户试图导航到视图时，它会返回到根。
angular-route和ui-router能混在一起吗？
angular.module('StyleGuide', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
function ($state
浏览 2提问于2016-05-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
