Я схожу с ума, пытаясь установить простое тестовое приложение на 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 })]);
Я думаю, что 'test3.ts @ Component' должен иметь' templateurl: "приложение/Test3.html'' – Chandermani
1 приходит потому, что вы используете изменение местоположения на основе стандарта html5. В таком случае инфраструктура сервера должна перенаправлять URL-адреса, чтобы загружать правильный контент (корневой контент) независимо от URL-адреса. – Chandermani
Привет, Chandemani, спасибо, что указали это! Я редактировал шаблон test3 Url. Ну, но я уверен, что это должен быть способ загрузить разные страницы, просто набрав их URL-адрес в адресной строке. Я просто не могу заставить работать. Когда я нажимаю на первую ссылку, адрес отображает правильный путь. Но если я обновляюсь или пытаюсь перейти непосредственно в это место, я получаю ** Не могу GET/Test2 **. – Zorthgo