javascript - angular 相当于 angularjs 状态

Question

在 AngularJS 中，出于路由目的，我们定义了带有子项的状态，这使得在 View 之间切换成为可能，结果每个 View 始终在一个容器中呈现:

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

无论我们选择哪种状态 - View 总是在一个具有 ui-view 属性的容器中呈现。

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

在 app.component.ts 中，我们有 router-outlet 用于渲染组件模板。

比如说，我们有很多嵌套的子路由——是否可以在这个 outlet 中渲染所有的子路由？

在这种情况下，app-routing.module.ts 中的代码会是什么样子？

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

Answer 1

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

import {Routes} from '@angular/core' 

第 2 步:将你想要设置的所有路由添加到数组 pf type Routes like 中:这是为了通知你应用程序中的所有路由。每条路线都是此数组中的一个 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 内容。

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

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

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

routerLink="/通信路由"

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