角的相當於angularjs指出

在AngularJS，用於路由目的，我們定義兒童這使得有可能，其結果是每個視圖在一個容器中總是呈現在視圖之間切換狀態：角的相當於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中的代碼在這種情況下會是什麼樣子？

任何人都可以給一個如何去做一個工作的例子嗎？

來源

2017-10-05 Alex Herman

您的代碼應該如下

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

來源

2017-10-05 04:41:52 Vignesh

該方法奏效，謝謝！ –

這是一個很好的答案，顯然OP是滿意的，但我很好奇，如果角路由器實際上提供了UI路由器的靈活性。例如，通過路由更改應用程序狀態而無需更改URL的能力 –

首先，各州不是AngularJS的官方概念。它們來自ui路由器，它起初是作爲簡單內置路由器的替代品而生的。最終，ui-router成爲AngularJS路由的實際標準，而Angular團隊將官方ng路由模塊提取到一個單獨的可選庫中。

ui路由器，雖然很複雜，但非常出色，並且贏得了我認爲應得的聲望和成功。這一成功促成了其擴展，以支持其他平臺在爲React等框架編寫的應用程序中實現相同的強大的基於狀態的結構。

它現在可用於角（以前稱爲Angular 2）。

您可以閱讀文檔，看看如何讓https://ui-router.github.io/ng2

開始這裏是一個片段從src/app/app.states.ts模塊的official example repository

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

正如我們所看到的，也有可用的兼容的概念，包括看起來像resolves API的一個很好的演變，它允許面向功能的注入，這通常比在ui路由器中基於類注入更簡單，其中AngularJS。

注意，我沒有用它在Angular項目中。

來源

2017-10-05 04:36:37

步驟1：從@角/路由器導入路由 在app.module.ts ..進口路線。你必須寫

import {Routes} from '@angular/core'

第2步： 添加所有你想建立一個數組PF型路線像路線：這是在您的應用程序通知角所有路由。每個路由都是這個數組中的一個JavaScript對象。

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

總是你必須給路徑，這個你您的域名，如「本地主機：4200 /通信路徑」後輸入的內容。

第3步：添加動作路由，即當達到此路徑時會發生什麼。

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

在這裏，我已經給出了組件名稱「communicationroutecomponent」，即當路徑「/通信路線」到達

第4步該組件將被加載：註冊在您的應用程序的途徑 要做到這一點，你將有app.module.ts

import {RouterModule} from '@angular/router'

Routermodule有特殊的方法forRoot（），它註冊我們的路線做新的進口。

在我們的例子中，我們將不得不寫這一段代碼在

imports :[ 
RouterModule.forRoot(appRoutes) 
]

我們的路線現在註冊成立，現角知道我們的路線。

第5步：在哪裏顯示路線內容，即您的路線頁的HTML內容。

對於此角度有指示。我們需要包括我們想要加載我們的內容的地方，即在html中。

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

導航路線： 角度給出了這種routerLink 一個指令，所以如果我們要導航到用戶的組件，你可以在你的HTML元素給這個：

routerLink =「/通信 - 路線「

我希望我能夠解釋這是如何工作的。

來源

2017-10-05 05:06:07 vertika

這是一個很好的答案，但我很好奇，如果角度路由器實際上提供了ui路由器所具有的靈活性。例如，通過路由更改應用程序狀態而不更改URL的功能。話雖如此，我不認爲這樣的功能本身是必需的，但抽象是很好的，因爲您可以在適當的時候從用戶隱藏更改，同時仍然通過路由器控制應用程序 –

角的相當於angularjs指出

回答

相關問題