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

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

import {Routes} from '@angular/core' 

步骤2： 添加要在数组中设置的所有路由pf类型路由如下 ：这是用于通知角度应用中的所有路由。 每个路由都是此数组中的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)
]

我们的路线现已注册，而且我们现在知道我们的路线。

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

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

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

导航到路径： angular为此routerLink提供了一个指令，因此如果我们要导航到用户组件，您可以在html元素中指定：

routerLink =“/通信路径”

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

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

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

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

ui-router，虽然很复杂但很特别，并且在我看来获得了当之无愧的人气和成功。 这一成功促使其扩展以支持其他平台，这些平台在为React等框架编写的应用程序中实现了同样强大的基于状态的结构。

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

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

这是来自官方示例存储库的src/app/app.states.ts模块的片段

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

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

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