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項目中使用過它。