angular 等价于 angularjs 状态答案

【问题标题】：angular's equivalent to angularjs statesangular 等价于 angularjs 状态
【发布时间】：2017-10-05 03:21:34
【问题描述】：

在 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 中的代码在这种情况下会是什么样子？

谁能给出一个可行的例子来说明如何去做？

【问题讨论】：

标签： javascript angularjs angular angular-ui-router angular2-routing

【解决方案1】：

第 1 步：从 @angular/router 导入路由 在 app.module.ts .. 导入路由。你必须写

import {Routes} from '@angular/core'

第 2 步： 将您要设置的所有路由添加到一个数组 pf type Routes like 中：这是为了通知 Angular 应用程序中的所有路线。每个路由都是这个数组中的一个 javascript 对象。

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

您总是必须给出路径，这是您在域之后输入的内容，例如“localhost：4200/communication-route”。

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

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

这里我给了组件名称“communicationroutecomponent”，即当到达路径“/communication-route”时这个组件将被加载

第 4 步：在您的应用中注册您的路线 为此，您必须在 app.module.ts 中进行新的导入

import {RouterModule} from '@angular/router'

Routermodule 有一个特殊的方法 forRoot() 来注册我们的路由。

在我们的例子中，我们将不得不在

中编写这段代码

imports :[
 RouterModule.forRoot(appRoutes)
]

我们的路线现在已经注册，Angular 现在知道我们的路线了。

第 5 步：在哪里显示路由内容，即您的路由页面的 html 内容。

对于这个角度有指令。我们需要包含我们想要加载内容的位置，即在 html 中。

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

导航到路线： angular 给出了这个 routerLink 的指令所以如果我们想导航到用户组件，你可以在你的 html 元素中给出这个：

routerLink="/communication-route"

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

【讨论】：

这是一个很好的答案，但我很好奇角度路由器是否真的提供了 ui-router 的灵活性。例如，通过路由更改应用程序状态而不更改 URL 的能力。话虽如此，我不相信这样的功能本身是必要的，但抽象很好，因为您可以在适当的地方隐藏用户的更改，同时仍然通过路由器控制应用程序

【解决方案2】：

你的代码应该如下

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

【讨论】：

这是一个很好的答案，显然 OP 很满意，但我很好奇角度路由器是否真的提供了 ui-router 的灵活性。例如，无需更改 URL 即可通过路由更改应用程序状态

【解决方案3】：

首先，状态不是 AngularJS 的官方概念。它们来自 ui-router，它最初是作为简单的内置路由器的替代品。

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

ui-router，复杂但卓越，在我看来已经赢得了当之无愧的人气和成功。这一成功使其扩展到支持其他平台，从而在为 React 等框架编写的应用程序中实现同样强大的基于状态的结构。

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

您可以阅读文档并了解如何开始使用 https://ui-router.github.io/ng2

这是来自official example repository 的src/app/app.states.ts 模块的sn-p

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

正如我们所看到的，有可用的兼容概念，包括看起来像 resolves API 的一个很好的演变，它允许面向函数的注入，这通常比使用 AngularJS 的 ui-router 中基于类的注入更简单。

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

【讨论】：