angular 相当于 angularjs 状态

Question

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

任何人都可以提供一个工作示例来说明如何去做吗？

Answer 1

首先，状态不是官方的 AngularJS 概念。它们来自 ui-router，它开始作为路由器中简单 built 的替代品。

最终，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 模块的片段

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

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

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

Answer 2

你的代码应该如下

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

Answer 3

第 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'

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

在我们的例子中，我们必须在

中编写这段代码

imports :[
 RouterModule.forRoot(appRoutes)
]

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

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

为此 angular 有指令。我们需要包括我们想要加载内容的位置，即 html.

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

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

routerLink="/通信路由"

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

angular 相当于 angularjs 状态

angular's equivalent to angularjs states

javascript

angularjs

angular

angular-ui-router

angular2-routing