Ví dụ về định tuyến mô-đun tính năng số 2

Question

Theo định tuyến Angular 2, tôi hầu như có thể tìm thấy các ví dụ về kịch bản có chính xác một tệp định tuyến cho toàn bộ ứng dụng.

Tôi muốn xem ví dụ về cách sử dụng không chỉ một tệp định tuyến, mà còn là tệp định tuyến chính và sau đó có ít nhất một tệp định tuyến mô-đun tính năng.

Chỉnh sửa: Tôi nhận thấy rằng a somewhat similar question đã được yêu cầu và trả lời. Có hai lý do tại sao tôi không thấy điều đó đặc biệt hữu ích:

1) Câu hỏi rất cụ thể cho tình huống của người dùng đó và do đó có rất nhiều "tiếng ồn". Tất cả những gì tôi yêu cầu là một ví dụ đơn lẻ về định tuyến mô-đun tính năng.

2) Câu trả lời cho câu hỏi đó dường như không giải quyết cách tạo tệp định tuyến cho mô-đun tính năng và sau đó buộc nó trở lại định tuyến chính của ứng dụng. Có lẽ nó ở đó và tôi chỉ thiếu nó nhưng tôi không thấy nó ở đó.

Answer 1

Hãy xem ví dụ này bao gồm những gì bạn đang tìm kiếm.

Đây là những module được sử dụng:

• AppModule (mô-đun root)
• UsersModule (tính năng mô-đun)

Snippets dưới đây được đơn giản hóa.

app.module.ts

import { UsersModule } from './users.module'; 
import { AppRouting } from './app.routing'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    UsersModule, 
    AppRouting, 
    ], 
    declarations: [...], 
    providers: [...], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

app.routing.ts

const appRoutes: Routes = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full' }, 
    { path: 'home', component: Home }, 
    { path: '**', component: NotFound }, //always last 
]; 

export const AppRouting = RouterModule.forRoot(appRoutes, { 
    useHash: true 
}); 

users.module.ts

import { NgModule } from '@angular/core'; 
import { UsersRouting } from './users.routing'; 

@NgModule({ 
    imports: [ 
    CommonModule, // ngFor, ngIf directives 
    UsersRouting, 
    ], 
    declarations: [...], 
    providers: [...] 
}) 
export class UsersModule { } 

người sử dụng.định tuyến

const usersRoutes: Routes = [ 
    { path: 'users', 
    children: [ 
     { path: '', component: Users }, 
     { path: ':id', component: User } 
    ] 
    } 
]; 

export const UsersRouting = RouterModule.forChild(usersRoutes); 

Plunker: http://plnkr.co/edit/09Alm0o4fV3bqBPUIFkz?p=preview

Mẫu mã cũng bao gồm AboutModule (mô-đun được nạp lười biếng, bao gồm giải quyết chẳng hạn) nhưng không bao gồm một ví dụ Shared Module.

Bạn có thể tìm thêm thông tin chi tiết tại các slide: https://slides.com/gerardsans/ngpoland-amazing-ng2-router

Answer 2

Dưới đây là ví dụ về cách tôi xử lý định tuyến của mình với các tuyến con. Tôi nghĩ điều này sẽ giúp bạn và dạy bạn sử dụng lộ trình con để cung cấp Guard cho một số thành phần của bạn. Điều này sẽ đảm bảo một số lượt xem nếu người dùng thiếu xác thực. Tôi tách riêng của tôi trong public và secure định tuyến mọi thứ thông qua bố cục, sau đó tải tuyến đường cho từng bố cục được chọn.

Đảm bảo xuất tuyến đường dành cho trẻ em và các tuyến đường chính xác được gọi trong tuyến bố trí. Ngoài ra, hãy đảm bảo bạn sử dụng redirectTo trong mỗi tệp tuyến đường dành cho trẻ em.

Chúng tôi đang xác định bố cục của mình công khai hoặc bảo mật. Sau đó cung cấp các tệp tuyến đường trong mỗi thư mục đó để tiếp nhận khi tuyến đường tạo được chọn.

app.routing.ts

const APP_ROUTES: Routes = [ 
    { path: '', redirectTo: '/home', pathMatch: 'full', }, 
    { path: '', component: PublicComponent, data: { title: 'Public Views' }, children: PUBLIC_ROUTES }, 
    { path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES } 
]; 

Sau đó, tôi có một thư mục layouts

bố trí

layouts/public/public.components.ts 
layouts/public/public.components.html 
layouts/secure/secure.components.ts 
layouts/secure/secure.components.html 

secure.component.ts đó là cách bố trí trông như thế này,

import { Component, OnInit }  from '@angular/core'; 
import { Router }     from '@angular/router'; 
import { Auth }      from './../services/auth.service'; 

@Component({ 
    providers: [ Auth ], 
    selector: 'app-dashboard', 
    templateUrl: './secure.component.html' 
}) 
export class SecureComponent implements OnInit { 

    constructor(private router: Router, private auth: Auth) { } 

    ngOnInit(): void { } 
} 

Sau đó, trong thư mục an toàn của bạn, bạn có thể tạo ra một thành phần và chọn mẫu bạn sẽ sử dụng cho nó,

@Component({ 
    providers: [ Auth ], 
    templateUrl: './profile.component.html' 
}) 
export class ProfileComponent implements OnInit { 

    constructor(private router: Router, private auth: Auth, private http: Http ) { } 

    ngOnInit() { } 
} 

Bây giờ hãy chắc chắn để tạo các tuyến trẻ của bạn trong thư mục an toàn và công cộng. Khi tuyến đường được nhấn vào tuyến đường con sẽ tải lớp và tệp mẫu chính xác sẽ được hiển thị.

Hãy nhớ rằng chúng sẽ là con của bố cục của bạn. Vì vậy, bạn có thể đặt thanh điều hướng và chân trang trong secure.component.html và nó sẽ hiển thị trong tất cả các thành phần bảo mật của bạn. Bởi vì chúng tôi đang sử dụng bộ chọn để tải nội dung. Tất cả các thành phần của bạn an toàn và công khai sẽ được tải vào selctory bên trong các tệp bố cục html.

tuyến đường trẻ em /public/piublic.routes.ts

export const PUBLIC_ROUTES: Routes = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full' }, 
    { path: 'p404', component: p404Component }, 
    { path: 'e500', component: e500Component }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'register', component: RegisterComponent }, 
    { path: 'home', component: HomeComponent } 
]; 

/secure/secure.routes.ts

export const SECURE_ROUTES: Routes = [ 
    { path: '', redirectTo: 'overview', pathMatch: 'full' }, 
    { path: 'items', component: ItemsComponent }, 
    { path: 'overview', component: OverviewComponent }, 
    { path: 'profile', component: ProfileComponent }, 
    { path: 'reports', component: ReportsComponent } 
]; 

Tóm tắt

Chúng tôi đã thiết lập một tập tin rout ban đầu trong thư mục gốc của ứng dụng Angular2 của chúng tôi. Tệp tuyến đường này hướng lưu lượng truy cập đến một trong hai bố cục tùy thuộc vào việc người dùng có được xác thực hay không. Nếu họ có xác thực cho bất kỳ bố cục công khai tuyến đường hoặc bố cục an toàn nào được phân phát. Sau đó, mỗi bố trí có một loạt các tuyến đường con và các thành phần được phục vụ cho bố trí tương ứng.

Vì vậy, để xóa các tập tin cấu trúc lên,

root =/

Bạn tuyến ứng dụng chính mà kiểm soát bố trí được xem.

/app.routing.ts

Bố cục giữ bố cục an toàn hoặc công khai.

Công

`/layouts/public.components.ts 
/layouts/public.components.html 
/layouts/public.routing.ts` 

an toàn

`/layouts/secure.components.ts 
/layouts/secure.components.html 
/layouts/secure.routing.ts` 

thư mục nào đó nắm giữ bất cứ điều gì đó là mở cửa cho xem mà không auth.

/public/home-component.ts 
/public/home-component.html 

Thư mục an toàn chứa các tuyến đường và thành phần cần thiết.

/public/profile-component.ts 
/public/profile-component.html