Javascript 角度'；s相当于angularjs状态

在AngularJS中，出于路由目的，我们定义了具有子级的状态，这使得可以在视图之间切换，从而使每个视图始终呈现在一个容器中：

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

无论我们选择哪种状态-视图总是在一个具有

ui-view

属性的容器中呈现

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

在app.component.ts中，我们有

路由器出口

，在那里可以呈现组件模板

比如说，我们有许多嵌套的子路由-是否可以在这个出口中渲染所有子路由

在本例中，

app routing.module.ts

中的代码是什么样子的

---

有人能举一个工作实例来说明如何进行吗？

首先，国家不是官方的AngularJS概念。它们来自ui路由器，它最初是作为简单内置路由器的替代品出现的

最终，ui路由器成为AngularJS中路由的事实标准，而官方ng路由模块被Angular团队提取到一个单独的可选库中

用户界面路由器，是复杂的，但例外，并赢得了什么，在我看来是当之无愧的普及和成功。这一成功使其扩展到支持其他平台，从而在为React等框架编写的应用程序中实现同样强大的基于状态的结构

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

您可以阅读文档并了解如何开始

下面是来自的

src/app/app.states.ts

模块的一个片段

正如我们所见，有一些兼容的概念可用，包括resolves API的一个很好的演变，它允许面向函数的注入，这通常比使用AngularJS的ui路由器中基于类的注入更简单

---

注意，我没有在角度项目中使用它。

您的代码应该如下所示

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

---

步骤1:从@angular/router导入路由 在app.module.ts中。。进口路线。你必须写作

import {Routes} from '@angular/core' 

步骤2： 添加要在阵列pf类型路由中设置的所有路由，如： 这用于通知应用程序中的所有路线。每个路由都是该数组中的一个javascript对象

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

您必须始终给出路径，这是您在域之后输入的内容，如“localhost:4200/communicationroute”

第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)
]

我们的路线现在已经登记，angular现在知道我们的路线

第5步：在何处显示路线内容，即路线页面的html内容。

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

对于这个问题，我们有指导。 我们需要包括我们想要加载内容的地方，即在html中

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

导航到路线： angular为该routerLink提供了一个指令 因此，如果我们想导航到users组件，您可以在html元素中给出：

routerLink=“/communication route”

---

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

这是一个很好的答案，显然OP是满意的，但我很好奇角度路由器是否真的提供了ui路由器的灵活性。例如，在不改变URL的情况下通过路由改变应用程序状态的能力这是一个很好的答案，但我很好奇角度路由器是否真的提供了ui路由器所具有的灵活性。例如，在不更改URL的情况下通过路由更改应用程序状态的能力。话虽如此，我并不认为这样的功能本身是必要的，但抽象很好，因为您可以在适当的地方对用户隐藏更改，同时仍然通过路由器控制应用程序