2015-10-24 9 views
2

Я схожу с ума, пытаясь установить простое тестовое приложение на Angular 2. У меня есть 3 страницы/компоненты, которые я хочу загрузить с помощью нового Component Router. Я получил его в полурабочее время. В настоящее время у меня есть две проблемы ...Угловой 2 компонентный маршрутизатор

1 - Если вы наберете путь компонента, который хотите перейти на Ex. «http://127.0.0.1:8080/Test2» вместо загрузки моей страницы Test2, он не говорит, что не может найти этот маршрут.

2 - При попытке загрузить разные страницы при первом щелчке по ссылке он будет правильно загружать страницу. Все остальные страницы генерируют исключение, когда я нажимаю ссылку.

Это моя установка:

App.ts

import {Component, bootstrap, provide} from 'angular2/angular2'; 
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig, APP_BASE_HREF} from 'angular2/router'; 

import {Test1} from './Test1'; 
import {Test2} from './Test2'; 
import {Test3} from './Test3'; 

@Component({ 
    selector: 'my-app', 
    template: '<test1></test1><router-outlet></router-outlet>', 
    directives: [ROUTER_DIRECTIVES, Test1, Test2] 
}) 

@RouteConfig([ 
    {path: '/', as: 'Home', component: Test1}, 
    {path: '/Test2', as: 'Test2', component: Test2}, 
    {path: '/Test3', as: 'Test3', component: Test3} 
]) 

class AppComponent { 
    constructor() {} 
} 

bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, { useValue: '/' })]); 

Test1.ts

import {Component, bootstrap} from 'angular2/angular2'; 
import {RouterLink} from 'angular2/router'; 

@Component({ 
    selector: 'test1', 
    templateUrl: 'app/Test1.html', 
    directives: [RouterLink] 
}) 
export class Test1 { } 

test1.html

<h1> Test 1 </h1> 
<a [router-link]="['/Test2']">Test Link 2</a> 

Test2.ts

import {Component, bootstrap} from 'angular2/angular2'; 
import {RouterLink} from 'angular2/router'; 

@Component({ 
    selector: 'test2', 
    templateUrl: 'app/Test2.html', 
    directives: [RouterLink] 
}) 
export class Test2 { } 

Test2.html

<h1> Test 2 </h1> 
<a [router-link]="['/Test3']">Test Link 3</a> 

Test3.ts

import {Component, bootstrap} from 'angular2/angular2'; 
import {RouterLink} from 'angular2/router'; 

@Component({ 
    selector: 'test3', 
    templateUrl: 'app/Test3.html', 
    directives: [RouterLink] 
}) 
export class Test3 { } 

Test3.html

<h1> Test 3 </h1> 
<a [router-link]="['/Test2']">Test Link 2</a> 

Спасибо за помощь, ребята!

Решение проблемы с YakovSStategy устранено. Для любого, имеющего тот же вопрос, полный рабочий код на и рабочую версию моих App.ts выглядит следующим образом:

import {Component, bootstrap, provide} from 'angular2/angular2'; 
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig, APP_BASE_HREF, LocationStrategy, HashLocationStrategy} from 'angular2/router'; 

import {Test1} from './Test1'; 
import {Test2} from './Test2'; 
import {Test3} from './Test3'; 

@Component({ 
    selector: 'my-app', 
    template: ` <a [router-link]="['/Home']">Test1 Link</a> 
       <a [router-link]="['/Test2', {id: 3}]">Test2 Link</a> 
       <a [router-link]="['/Test3']">Test3 Link</a> 
       <router-outlet></router-outlet>`, 
    directives: [ROUTER_DIRECTIVES, Test1, Test2,Test3] 
}) 

@RouteConfig([ 
    {path: '/',   component: Test1, as: 'Home'}, 
    {path: '/Test2/:id', component: Test2, as: 'Test2'}, 
    {path: '/Test3',  component: Test3, as: 'Test3'} 

]) 

class AppComponent { 
    constructor() { } 
} 

bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, { useClass: HashLocationStrategy })]); 
+0

Я думаю, что 'test3.ts @ Component' должен иметь' templateurl: "приложение/Test3.html'' – Chandermani

+0

1 приходит потому, что вы используете изменение местоположения на основе стандарта html5. В таком случае инфраструктура сервера должна перенаправлять URL-адреса, чтобы загружать правильный контент (корневой контент) независимо от URL-адреса. – Chandermani

+0

Привет, Chandemani, спасибо, что указали это! Я редактировал шаблон test3 Url. Ну, но я уверен, что это должен быть способ загрузить разные страницы, просто набрав их URL-адрес в адресной строке. Я просто не могу заставить работать. Когда я нажимаю на первую ссылку, адрес отображает правильный путь. Но если я обновляюсь или пытаюсь перейти непосредственно в это место, я получаю ** Не могу GET/Test2 **. – Zorthgo

ответ

5

я сделал что-то подобное, и это работает. Попробуйте это:

bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})]); 
+0

Спасибо за помощь Яков! Это работало неэффективно. :) – Zorthgo

+0

У некоторых проблем с этим, работает как шарм! –

+0

мы можем использовать 'ROUTER_DIRECTIVES' в параметрах функции начальной загрузки? – allenhwkim

Смежные вопросы