角的相当于angularjs指出

在AngularJS，用于路由目的，我们定义儿童这使得有可能，其结果是每个视图在一个容器中总是呈现在视图之间切换状态：角的相当于angularjs指出

$stateProvider.state("communication.create-message", { 
    url: ..., 
    templateUrl: ..., 
    menu: ..., 
    parent: "communication", 
    ncyBreadcrumb: { 
     label: "Create Message" 
    } 
});

哪种状态我们选择 - 视图始终在具有ui-view属性的一个容器中呈现。

我想在Angular 2或更高版本中实现相同，但我不知道如何重现上述功能。

在app.component.ts中我们有router-outlet组件模板被渲染。

说，我们有很多嵌套的子路由 - 是否有可能在这个插座内渲染它们？

app-routing.module.ts中的代码在这种情况下会是什么样子？

任何人都可以给一个如何去做一个工作的例子吗？

来源

2017-10-05 Alex Herman

您的代码应该如下

export const ComRoute: Routes = [ 
{ 
path: 'communication-route', 
children: [ 
{ path: 'communication', component: communicationComponent }, 
{ path: ':child1', component: child1Component }, 
{ path: ':child1/field', component: child1Component} 
] 
} 
];

来源

2017-10-05 04:41:52 Vignesh

该方法奏效，谢谢！ –

这是一个很好的答案，显然OP是满意的，但我很好奇，如果角路由器实际上提供了UI路由器的灵活性。例如，通过路由更改应用程序状态而无需更改URL的能力 –

首先，各州不是AngularJS的官方概念。它们来自ui路由器，它起初是作为简单内置路由器的替代品而生的。最终，ui-router成为AngularJS路由的实际标准，而Angular团队将官方ng路由模块提取到一个单独的可选库中。

ui路由器，虽然很复杂，但非常出色，并且赢得了我认为应得的声望和成功。这一成功促成了其扩展，以支持其他平台在为React等框架编写的应用程序中实现相同的强大的基于状态的结构。

它现在可用于角（以前称为Angular 2）。

您可以阅读文档，看看如何让https://ui-router.github.io/ng2

开始这里是一个片段从src/app/app.states.ts模块的official example repository

export const loginState = { 
    parent: 'app', 
    name: 'login', 
    url: '/login', 
    component: LoginComponent, 
    resolve: [ 
    { token: 'returnTo', deps: [Transition], resolveFn: returnTo }, 
    ] 
};

正如我们所看到的，也有可用的兼容的概念，包括看起来像resolves API的一个很好的演变，它允许面向功能的注入，这通常比在ui路由器中基于类注入更简单，其中AngularJS。

注意，我没有用它在Angular项目中。

来源

2017-10-05 04:36:37

步骤1：从@角/路由器导入路由 在app.module.ts ..进口路线。你必须写

import {Routes} from '@angular/core'

第2步： 添加所有你想建立一个数组PF型路线像路线：这是在您的应用程序通知角所有路由。每个路由都是这个数组中的一个JavaScript对象。

const appRoutes : Routes = [ 
    {path : 'communication-route'} 
]

总是你必须给路径，这个你您的域名，如“本地主机：4200 /通信路径”后输入的内容。

第3步：添加动作路由，即当达到此路径时会发生什么。

const appRoutes : Routes = [ 
    {path : 'communication-route'} , component :communicationroutecomponent 
]

在这里，我已经给出了组件名称“communicationroutecomponent”，即当路径“/通信路线”到达

第4步该组件将被加载：注册在您的应用程序的途径 要做到这一点，你将有app.module.ts

import {RouterModule} from '@angular/router'

Routermodule有特殊的方法forRoot（），它注册我们的路线做新的进口。

在我们的例子中，我们将不得不写这一段代码在

imports :[ 
RouterModule.forRoot(appRoutes) 
]

我们的路线现在注册成立，现角知道我们的路线。

第5步：在哪里显示路线内容，即您的路线页的HTML内容。

对于此角度有指示。我们需要包括我们想要加载我们的内容的地方，即在html中。

<a router-outlet="/communication-route"></a>

导航路线： 角度给出了这种routerLink 一个指令，所以如果我们要导航到用户的组件，你可以在你的HTML元素给这个：

routerLink =“/通信 - 路线“

我希望我能够解释这是如何工作的。

来源

2017-10-05 05:06:07 vertika

这是一个很好的答案，但我很好奇，如果角度路由器实际上提供了ui路由器所具有的灵活性。例如，通过路由更改应用程序状态而不更改URL的功能。话虽如此，我不认为这样的功能本身是必需的，但抽象是很好的，因为您可以在适当的时候从用户隐藏更改，同时仍然通过路由器控制应用程序 –

角的相当于angularjs指出

回答

相关问题