2015-08-19 19 views
6

Tôi đã theo dõi this hướng dẫn định tuyến trong Angular và nó không hoạt động. Khi tôi sử dụng bộ chọn 'comp' để đặt mã HTML của nó, nó hoạt động, nhưng khi tôi cố định tuyến với bộ định tuyến, nó chỉ hiển thị tiêu đề từ index.html.Angular2 Routing

tôi có như sau:

main.ts:

import * as ng from 'angular2/angular2'; 
 
import {Comp} from './comp'; 
 
@ng.Component({ 
 
    selector: 'my-app' 
 
}) 
 
@ng.View({ 
 
    directives: [ng.formDirectives, ng.RouterOutlet], 
 
    template: ` 
 
    <nav> 
 
     <ul> 
 
     <li>Start</li> 
 
     <li>About</li> 
 
     <li>Contact</li> 
 
     </ul> 
 
    </nav> 
 
    <main> 
 
     <router-outlet></router-outlet> 
 
    </main> 
 
    ` 
 
}) 
 
@ng.RouteConfig([{ path: '/', component: Comp }]) 
 
class AppComponent { 
 
} 
 
ng.bootstrap(AppComponent, [ng.routerInjectables]);

comp.ts:

import * as ng2 from 'angular2/angular2'; 
 
@ng2.Component({ 
 
    selector: 'comp' 
 
}) 
 
@ng2.View({ 
 
    template: ` 
 
    <h1>hi<h1> 
 
    ` 
 
}) 
 
export class Comp { 
 
    constructor() { 
 
    } 
 
}

index.html:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Test3</title> 
 
    <script src="lib/traceur/traceur.js"></script> 
 
    <script src="lib/system.js/dist/system.js"></script> 
 
    <script src="lib/angular2-build/angular2.js"></script> 
 
    <script src="lib/angular2-build/router.dev.js"></script> 
 
    <script> 
 
     System.config({ 
 
      packages: { 
 
       'js': { 
 
        defaultExtension: 'js' 
 
       } 
 
      } 
 
     }); 
 
     System.import('/js/main'); 
 
    </script> 
 
</head> 
 
<body> 
 
    <h1>Hello There</h1> 
 
    <my-app></my-app> 
 
</body> 
 
</html>

+0

Bạn đã nhận xét tệp 'router.dev.js' D:! –

+0

Bạn nói đúng nhưng không phải vậy. Tôi đã đăng nhầm một phiên bản cũ hơn – user265732

+0

Xem [ví dụ] này (https://github.com/angular/angular/blob/master/modules/examples/src/routing/inbox-app.ts) và xem phần nhập. Phiên bản bạn đang sử dụng? –

Trả lời

-1

Router angular2 đã phát triển phi thường , đối với tất cả những người vẫn còn mắc kẹt với các hướng dẫn cũ đã không phản ánh những thay đổi sẵn sàng cho những bất ngờ lớn. Tôi sẽ đề nghị các bạn hãy xem dự án phát minh của tôi, đó là ở cạnh chảy máu của angular2. Tôi không quảng bá nó, vì nó là một dự án nguồn đóng. Bạn có thể có ý tưởng về định tuyến và hầu như tất cả các nguyên tắc angular2 từ nó. Không giống như các hướng dẫn khác, nó là một dự án làm việc đầy đủ thổi.

https://github.com/debanjanbasu/inventman

4

Bạn có thể tìm thấy hiện nay ví dụ làm việc phổ biến nhất của định tuyến here

Nhìn vào app/app.ts:

import {Component, bind, bootstrap, ViewEncapsulation} from 'angular2/angular2'; 
import { 
    RouteConfig, 
    ROUTER_DIRECTIVES, 
    ROUTER_BINDINGS, 
    ROUTER_PRIMARY_COMPONENT 
} from 'angular2/router'; 

import {Home} from './components/home/home'; 
import {About} from './components/about/about'; 
... 
@Component({ /// your root component 
}) 
@RouteConfig([ 
    { path: '/', component: Home, as: 'Home' }, 
    { path: '/about', component: About, as: 'About' } 
]) 
class App {} 

bootstrap(App, [ 
    ROUTER_BINDINGS, 
    bind(ROUTER_PRIMARY_COMPONENT).toValue(App) 
]); 
+0

FYI, thông số 'Route.as' đã được đổi thành' Route.name'.https: //github.com/angular/angular/commit/7d83959be56780b1ba9cf7efb6cd96452bec2761. Nếu không, ví dụ tốt +1. –

6

thay đổi Breaking đã được giới thiệu trong [email protected]

  • routerInjectables được đổi tên thành ROUTER_BINDINGS

  • ROUTER_BINDINGS sau đó được đổi tên thành ROUTER_PROVIDERS

Ngoài: Nhiều thay đổi phá vỡ gần đây nên hầu như không ai trong số những ví dụ trực tuyến đáng tin cậy.

Sử dụng ROUTER_PROVIDERS

Nó bao gồm:

  • RouteRegistry - registry của các tuyến đường được xác định
  • LocationStrategy = PathLocationStragety - Các tuyến đường phù hợp bằng con đường

Đây là ba sically một phím tắt để bootstrap Router của bạn với một thiết lập mặc định.

Ví dụ:

@Component ({ 
... 
}) 
@View ({ 
... 
}) 
@RouteConfig ({ 
... 
}) 
class App {} 

bootstrap(App, [ ROUTER_PROVIDERS ]); 

Nguồn:

1

Có thể là quá muộn cho câu trả lời nhưng nổi giận đọc toàn bộ câu trả lời, cung cấp cho nó một thử: P

  • View không còn trong angular2, nếu bạn đang sử dụng vẫn @view chú thích nó có thể gây ra sản xuất một số loại lỗi. vì vậy Only Component là nơi chứa tất cả các tùy chọn.

Theo quan chức, @View trang trí siêu dữ liệu đã không được chấp nhận trong bản phát hành beta.10.

  • ROUTER_DIRECTIVES cần khi bạn đang thực hiện các công cụ liên quan đến Định tuyến trong góc2. bằng cách tiêm ROUTER_DIRECTIVES vào danh sách chỉ thị, routerLinkrouter-outlet thuộc tính bắt buộc để định tuyến tự động có sẵn cho thành phần của bạn. bạn có thể tiêm ROUTER_DIRECTIVES tại thời điểm khởi động ứng dụng của bạn thay vì tiêm mỗi lần trong danh sách chỉ thị của mỗi thành phần.

Thay vì đăng toàn bộ liên kết câu trả lời gửi bài đến một số hữu ích câu trả lời liên quan đến định tuyến thấy ở đây cũng -

2

Trên hướng dẫn bạn sau họ cuối cùng đã tuyên bố nó không được chấp nhận, bạn có thể đọc nó bằng chữ in đậm:

Deprecation Note 

We are very sorry, but this article is out of date and has been deprecated. Usually, we keep our articles up to date, however, with this one it's very likely that we've written a complete new version. 

Nếu bạn muốn sử dụng thành phần định tuyến, tôi khuyên bạn nên cập nhật phiên bản Angular 2 của mình. Hãy lưu ý rằng một vài cài đặt đã thay đổi trong RC, vì vậy bạn có thể sẽ cần phải thiết lập lại cấu hình từ trang web chính thức và thực hiện một vài thay đổi.

Một người dùng khác có vấn đề tương tự như bạn here và việc nâng cấp sự cố đã được giải quyết. Chỉ cần nâng cấp phiên bản, sửa cấu hình và sử dụng tài liệu chính thức này từ here

0

Hãy thử xóa/trong đường dẫn của bạn như sau: @ ng.RouteConfig ([{path: "", component: Comp}]).

Bạn không cần chỉ định dấu gạch chéo trong cấu hình tuyến đường của mình.