Angular 2
라우팅
수색…
기본 라우팅
라우터는 응용 프로그램과의 사용자 상호 작용을 기반으로 한보기에서 다른보기로 탐색을 가능하게합니다.
다음은 Angular 2에서 기본 라우팅을 구현하는 단계입니다.
기본적인 예방 조치 : 태그가 있는지 확인하십시오.
<base href='/'>
index.html 파일의 head 태그 아래 첫 번째 자식으로 이 태그는 앱 폴더가 애플리케이션 루트임을 나타냅니다. Angular 2는 링크를 구성하는 것을 알고 있습니다.
첫 번째 단계 는 package.json에서 올바른 / 최신 라우팅 종속성을 가리키고 있는지 확인하는 것입니다.
"dependencies": {
......
"@angular/router": "3.0.0-beta.1",
......
}
두 번째 단계 는 클래스 정의에 따라 경로를 정의하는 것입니다.
class Route {
path : string
pathMatch : 'full'|'prefix'
component : Type|string
.........
}
라우트 파일 ( route/routes.ts )에서 다른 라우팅 경로에 대해 구성해야하는 모든 구성 요소를 임포트하십시오. 빈 경로는보기가 기본적으로로드됨을 의미합니다. 경로의 ":"은로드 된 구성 요소에 전달 된 동적 매개 변수를 나타냅니다.
경로는 의존성 주입을 통해 응용 프로그램에 제공됩니다. ProviderRouter 메서드는 매개 변수로 RouterConfig를 사용하여 호출되므로 특정 작업 라우팅을 호출하기 위해 구성 요소에 주입 할 수 있습니다.
import { provideRouter, RouterConfig } from '@angular/router';
import { BarDetailComponent } from '../components/bar-detail.component';
import { DashboardComponent } from '../components/dashboard.component';
import { LoginComponent } from '../components/login.component';
import { SignupComponent } from '../components/signup.component';
export const appRoutes: RouterConfig = [
{ path: '', pathMatch: 'full', redirectTo: 'login' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'bars/:id', component: BarDetailComponent },
{ path: 'login', component: LoginComponent },
{ path: 'signup', component: SignupComponent }
];
export const APP_ROUTER_PROVIDER = [provideRouter(appRoutes)];
세 번째 단계 는 경로 제공 업체를 부트 스트랩하는 것입니다.
main.ts (모든 이름이 될 수 있습니다. 기본적으로 systemjs.config에 정의 된 주 파일이어야합니다)
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './components/app.component';
import { APP_ROUTER_PROVIDER } from "./routes/routes";
bootstrap(AppComponent, [ APP_ROUTER_PROVIDER ]).catch(err => console.error(err));
네 번째 단계는 액세스 된 경로를 기반으로 라우터 구성 요소를로드 / 표시하는 것입니다. 지시문은 구성 요소를로드 할 위치를 알려주는 데 사용됩니다. ROUTER_DIRECTIVES 가져 오기를 사용합니다.
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'demo-app',
template: `
....................................
<div>
<router-outlet></router-outlet>
</div>
....................................
`,
// Add our router directives we will be using
directives: [ROUTER_DIRECTIVES]
})
다섯 번째 단계는 다른 경로를 연결하는 것입니다. 기본적으로 RouterOutlet은 RouterConfig에 빈 경로가 지정된 구성 요소를로드합니다. 라우터 링크 지시문은 html 앵커 태그와 함께 경로에 첨부 된 구성 요소를로드하는 데 사용됩니다. RouterLink는 링크를 생성하는 데 사용되는 href 속성을 생성합니다. 예 :
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'demo-app',
template: `
<a [routerLink]="['/login']">Login</a>
<a [routerLink]="['/signup']">Signup</a>
<a [routerLink]="['/dashboard']">Dashboard</a>
<div>
<router-outlet></router-outlet>
</div>
`,
// Add our router directives we will be using
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }
이제 정적 경로로 라우팅하는 것이 좋습니다. RouterLink는 경로와 함께 추가 매개 변수를 전달하여 동적 경로도 지원합니다.
{구성 요소}를 '@ 각도 / 핵심'에서 가져옵니다. '@ angular / router'에서 {ROUTER_DIRECTIVES}을 (를) 가져 오십시오.
@Component({
selector: 'demo-app',
template: `
<ul>
<li *ngFor="let bar of bars | async">
<a [routerLink]="['/bars', bar.id]">
{{bar.name}}
</a>
</li>
</ul>
<div>
<router-outlet></router-outlet>
</div>
`,
// Add our router directives we will be using
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }
RouterLink는 첫 번째 요소가 라우팅 경로이고 이후 요소가 동적 라우팅 매개 변수 인 배열을 사용합니다.
어린이 경로
때로는 뷰 또는 라우트를 서로 중첩시키는 것이 좋습니다. 예를 들어 대시 보드에서 탭과 비슷하지만 라우팅 시스템을 통해 구현 된 여러 하위보기가 필요하여 사용자의 프로젝트, 연락처, 메시지를 볼 수 있습니다. 이러한 시나리오를 지원하기 위해 라우터를 사용하여 하위 경로를 정의 할 수 있습니다.
먼저 위의 RouterConfig 를 조정하고 자식 경로를 추가합니다.
import { ProjectsComponent } from '../components/projects.component';
import { MessagesComponent} from '../components/messages.component';
export const appRoutes: RouterConfig = [
{ path: '', pathMatch: 'full', redirectTo: 'login' },
{ path: 'dashboard', component: DashboardComponent,
children: [
{ path: '', redirectTo: 'projects', pathMatch: 'full' },
{ path: 'projects', component: 'ProjectsComponent' },
{ path: 'messages', component: 'MessagesComponent' }
] },
{ path: 'bars/:id', component: BarDetailComponent },
{ path: 'login', component: LoginComponent },
{ path: 'signup', component: SignupComponent }
];
이제 우리는 자식 경로를 정의 했으므로 자식 경로를 DashboardComponent 표시 할 수 있습니다. 자식 경로를 추가 했으므로이 경로를 DashboardComponent 표시 할 수 있어야합니다. 이전에는 구성 요소가 <router-outlet></router-outlet> 태그에 표시된다는 것을 알게되었습니다. 비슷하게 DashboardComponent 에서 다른 RouterOutlet 을 선언합니다.
import { Component } from '@angular/core';
@Component({
selector: 'dashboard',
template: `
<a [routerLink]="['projects']">Projects</a>
<a [routerLink]="['messages']">Messages</a>
<div>
<router-outlet></router-outlet>
</div>
`
})
export class DashboardComponent { }
보시다시피, 우리는 자식 라우트가 표시되는 다른 RouterOutlet 을 추가했습니다. 일반적으로 빈 경로가있는 경로가 표시되지만 dashboard 경로가로드 될 때 바로 표시되기를 원하기 때문에 projects 경로로 리디렉션을 설정합니다. 즉, 빈 경로가 필요합니다. 그렇지 않으면 다음과 같은 오류가 발생합니다.
Cannot match any routes: 'dashboard'
빈 경로를 추가함으로써 빈 경로가 있는 경로를 의미하므로 라우터의 진입 점을 정의했습니다.
ResolveData
이 예제는 응용 프로그램의보기를 렌더링하기 전에 서비스에서 가져온 데이터를 해결할 수있는 방법을 보여줍니다.
서면 작성시 각도 / 라우터 3.0.0-beta.2 사용
users.service.ts
...
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { User } from './user.ts';
@Injectable()
export class UsersService {
constructor(public http:Http) {}
/**
* Returns all users
* @returns {Observable<User[]>}
*/
index():Observable<User[]> {
return this.http.get('http://mywebsite.com/api/v1/users')
.map((res:Response) => res.json());
}
/**
* Returns a user by ID
* @param id
* @returns {Observable<User>}
*/
get(id:number|string):Observable<User> {
return this.http.get('http://mywebsite.com/api/v1/users/' + id)
.map((res:Response) => res.json());
}
}
users.resolver.ts
...
import { UsersService } from './users.service.ts';
import { Observable } from 'rxjs/Rx';
import {
Resolve,
ActivatedRouteSnapshot,
RouterStateSnapshot
} from "@angular/router";
@Injectable()
export class UsersResolver implements Resolve<User[] | User> {
// Inject UsersService into the resolver
constructor(private service:UsersService) {}
resolve(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<User[] | User> {
// If userId param exists in current URL, return a single user, else return all users
// Uses brackets notation to access `id` to suppress editor warning, may use dot notation if you create an interface extending ActivatedRoute with an optional id? attribute
if (route.params['id']) return this.service.get(route.params['id']);
return this.service.index();
}
}
users.component.ts
이것은 모든 사용자의 목록이있는 페이지 구성 요소입니다. 사용자 세부 정보 페이지 구성 요소에서 비슷하게 작동하며 data.users 를 data.user 또는 app.routes.ts에 정의 된 키 (아래 참조)로 바꿉니다.
...
import { ActivatedRoute} from "@angular/router";
@Component(...)
export class UsersComponent {
users:User[];
constructor(route: ActivatedRoute) {
route.data.subscribe(data => {
// data['Match key defined in RouterConfig, see below']
this.users = data.users;
});
}
/**
* It is not required to unsubscribe from the resolver as Angular's HTTP
* automatically completes the subscription when data is received from the server
*/
}
app.routes.ts
...
import { UsersResolver } from './resolvers/users.resolver';
export const routes:RouterConfig = <RouterConfig>[
...
{
path: 'user/:id',
component: UserComponent,
resolve: {
// hence data.user in UserComponent
user: UsersResolver
}
},
{
path: 'users',
component: UsersComponent,
resolve: {
// hence data.users in UsersComponent, note the pluralisation
users: UsersResolver
}
},
...
]
...
app.resolver.ts
선택 사항으로 여러 개의 확인자를 함께 묶습니다.
중요 : 먼저 리졸버에서 사용 된 서비스를 가져와야합니다. 그렇지 않으면 '리졸버 오류 발생'공급자가 없습니다. 이러한 서비스는 전 세계에서 사용할 수 있으며 더 이상 모든 구성 요소 providers 에서 선언 할 필요가 없습니다. 메모리 누출을 막기 위해 구독을 취소하십시오.
...
import { UsersService } from './users.service';
import { UsersResolver } from './users.resolver';
export const ROUTE_RESOLVERS = [
...,
UsersService,
UsersResolver
]
main.browser.ts
부트 스트랩하는 동안 리졸버를 주입해야합니다.
...
import {bootstrap} from '@angular/platform-browser-dynamic';
import { ROUTE_RESOLVERS } from './app.resolver';
bootstrap(<Type>App, [
...
...ROUTE_RESOLVERS
])
.catch(err => console.error(err));
어린이와의 연결
원래의 문서와는 달리, app.routing.ts 또는 app.module.ts 파일 (자녀의 선호도에 따라 다름) 내에 자녀 경로를 올바르게 중첩시키는 방법임을 알게되었습니다. 이 접근법은 WebPack 또는 SystemJS를 사용할 때 작동합니다.
아래의 예는 home, home / counter 및 home / counter / fetch-data에 대한 경로를 보여줍니다. 첫 번째 및 마지막 경로는 리디렉션의 예입니다. 마지막으로 예제를 끝내면 Route를 내보내 별도의 파일로 가져 오는 적절한 방법이 있습니다. 예를 들어. app.module.ts
추가 설명을 위해 Angular는 부모 배열을 표현하기 위해 부모 구성 요소를 포함하는 경로가없는 자식 배열에 경로가 있어야합니다. 조금 혼란 스럽지만 하위 경로의 빈 URL을 생각하면 부모 경로와 동일한 URL이됩니다.
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { HomeComponent } from "./components/home/home.component";
import { FetchDataComponent } from "./components/fetchdata/fetchdata.component";
import { CounterComponent } from "./components/counter/counter.component";
const appRoutes: Routes = [
{
path: "",
redirectTo: "home",
pathMatch: "full"
},
{
path: "home",
children: [
{
path: "",
component: HomeComponent
},
{
path: "counter",
children: [
{
path: "",
component: CounterComponent
},
{
path: "fetch-data",
component: FetchDataComponent
}
]
}
]
},
{
path: "**",
redirectTo: "home"
}
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }