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步：从@ angular / router 导入路由在app.module.ts ..导入路由。你必须写

import {Routes} from '@angular/core'

第2步： 添加要在数组中设置的所有路由pf类型等路由：这是用于通知应用程序中所有路线的角度。每个路由都是此数组中的javascript对象。

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

总是你必须给出路径，这就是你在域名之后输入的内容，例如＆＃34; localhost：4200 / communication-route＆＃34;。

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

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

这里我给出了组件名称＆＃34; communicationroutecomponent＆＃34; ，即当路径＆＃34; / communication-route＆＃34;到达

第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 =＆＃34; /通信路径＆＃34;

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

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

以下是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的一个很好的演变，它允许面向函数的注入，这通常比使用 AngularJS 。

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

角度等同于angularjs状态

3 个答案: