각도 센서의 기본 배선

사람마다 각이 있다.

어떻게 각형 포선을 사용합니까?

라우트를 사용하는 이유

여보게, 네가 이곳에 온 것은 네가 광범위한 응용 프로그램을 개발했기 때문이라는 것을 나는 안다. 네가 실현 경로를 잊었거나, 기초 지식을 이미 알고 있기 때문이다. 너는 단지 이곳에 와서 그것에 대한 힌트를 얻었을 뿐이다.이 두 가지 상황에서 나는 최선을 다해 너를 도울 것이다.

라우트를 선택해야 하는 이유

좋은 질문입니다. Angular는 단일 페이지 응용 프로그램 프레임워크로 정의됩니다.그러나 루트는 사용자 체험의 현저한 강화로 여겨진다.더 중요한 것은 보호기와 해석기를 사용할 수 있다는 것입니다. 관심사의 분리를 더욱 존중하고 코드를 크게 간소화할 수 있습니다.

By using lazy loading modules, you will maximize the performance of your application.

어쨌든, 우리는 다른 장과 절에서 모든 이 요점을 토론할 것이다.나는 기초부터 이 문장을 쓸 것을 건의한다.

기본 경로

프로젝트를 만들 때 생성되는 기본 루트 모듈

기본적으로, 옵션을 지정하지 않고 각도 프로그램을 만들 때, 기본적으로 프로그램 경로를 얻을 수 있습니다.모듈ts.

_import_ { NgModule } _from_ '@angular/core';
_import_ { RouterModule, _Routes_ } _from_ '@angular/router';

_const_ routes: _Routes_ = []; (1)

@NgModule({
  imports: [RouterModule._forRoot_(routes)], (2)
  exports: [RouterModule]
})
_export class_ AppRoutingModule {}

이 모듈은 응용 프로그램에 가져왔습니다.모듈ts.

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, **AppRoutingModule** , ...], (3)
  bootstrap: [AppComponent]
})
_export class_ AppModule {
}

응용 프로그램에서구성 요소html, 당신은 다음과 같은 내용을 가지고 있습니다(기본적으로 생성된 코드 이후일 수 있습니다).

<router-outlet></router-outlet> (4)

아마도 우리는 멈춰서 설명할 수 있을 것이다.

Routes는 Route[]에 해당하는 유형일 뿐입니다.

_export declare type Routes_ = _Route_[];

루트는 하나의 인터페이스로 루트의 수요를 나타낸다.우리는 점차적으로 모든 속성을 볼 것이다.

RouterModule을 사용합니다.forRoot은 우선 루트 처리 기능의 모듈을 가져오고 우리가 정의한 루트를 제시합니다. (정의되지 않았습니다.)forRoot을 사용해야 합니다. 프로그램의 루트 정의이기 때문입니다.

관련 기능 모듈에서 루트 모듈을 가져오는 것을 잊지 마세요.

RouterOutlet은 Angular에서 정의한 명령으로 자리 표시자 역할을 하며 현재 라우터 상태에 따라 Angular가 채웁니다.

그래, 나는 누구도 잃고 싶지만, 걱정하지 마라. 우리는 예를 통해 이 모든 것을 볼 것이다.

우리의 첫 번째 기본 노선

가령 우리 프로그램에 두 개의 영역이 있는데, 각각feature-1과feature-2이다.우리는 해당 URL에 직접 액세스할 수 있기를 희망합니다.

http://localhost:4200/feature-1

http://localhost:4200/feature-2

둘 다 Feature1 어셈블리와 Feature2 어셈블리라는 관련 엔트리 포인트 어셈블리가 있습니다.
다음은 단순 경로를 정의하는 방법입니다.

// app-routing.module.ts

_const_ routes: _Routes_ = [
  {
    path: 'feature-1', component: Feature1Component,
  }, {
    path: 'feature-2', component: Feature2Component,
  }
];

이제 필요한 URLhttp://localhost:4200/feature-1http://localhost:4200/feature-2에 직접 액세스할 수 있습니다.
네, 그런데 입력http://localhost:4200할 때 기능 1에 바로 들어가고 싶어요.
네가 옳다. 우리는 기본 루트를 정의해야 한다.

// app-routing.module.ts

_const_ routes: _Routes_ = [
  {
    path: 'feature-1', component: Feature1Component,
  }, {
    path: 'feature-2', component: Feature2Component,
  }, {
    **path: '', pathMatch: 'full', redirectTo: 'feature-1',**
  }
];

여기서, 우리는 지정된 경로가 없을 때feature-1 방식으로 방향을 바꾸려고 정의했다.pathMatch: "full"을 잊지 마십시오. "no defined path"와 경로의 조합만 있으면 됩니다. "
HTML에서는 URL을 사용하여 페이지에 액세스할 수 있습니다.

<a _routerLink_="/feature-1">Feature 1</a>
<a _routerLink_="/feature-2">Feature 2</a>

팁: 링크가 활성 상태인지 어떻게 알 수 있습니까?다음과 같이 RouterLink 활동 명령을 사용할 수 있습니다.

<a _routerLink_="/feature-1" routerLinkActive="myCssClass" [routerLinkActiveOptions]="{exact: true}">Feature 1</a>

링크가 현재 라우팅과 정확히 일치하는 경우 해당 링크는 CSS 클래스 myCssClass를 가져옵니다.만약routerLinkActiveOptions:{exact:true}라면, 작업 방식은 일치하는 것과 유사합니다.

아이를 데리고 가는 노선

현재 우리의 기능-3이 두 개의 하위 기능으로 구성되어 있다고 가정하면 각각 하위 기능-3-1과 하위 기능-3-2라고 불리며 이전처럼 하나의 구성 요소가 직접 표시하지 않는다.

// app-routing.module.ts

_const_ routes: _Routes_ = [
  {
    path: 'feature-1', component: Feature1Component
  }, {
    path: 'feature-2', component: Feature2Component,
  }, **{  
 path: 'feature-3', children: [  
 {  
 path: 'sub-feature-3-1',  
 component: Subfeature31Component  
 }, {  
 path: 'sub-feature-3-2',  
 component: Subfeature32Component  
 }, {  
 path: '',  
 redirectTo: 'sub-feature-3-1',  
 pathMatch: 'full' _// don't forget it_  
}  
 ]  
 }** , {
    path: '', pathMatch: 'full', redirectTo: 'feature-1'
  }
];

HTML에서 다음을 수행합니다.

<a _routerLink_="/feature-1">Feature 1</a>
<a _routerLink_="/feature-2">Feature 2</a>
<a _routerLink_="/feature-3">Sub Feature 3 1</a> <!-- Simplified there is a redirectTo -->
<a _routerLink_="/feature-3/sub-feature-3-2">Sub Feature 3 2</a>

라우터 서비스

라우터 서비스는 한 URL에서 다른 URL로 이동할 수 있는 탐색 정보를 제공합니다.
팁: 탐색 프로세스의 작업을 디버깅하고 이해하려면 모든 라우팅 이벤트를 추적할 수 있습니다.

@NgModule({
  imports: [RouterModule._forRoot_(routes, {
    enableTracing: !environment.production // just in dev mode
  })],
  exports: [RouterModule]
})
_export class_ AppRoutingModule {
}

라우터 서비스 탐색을 사용하려면 다음과 같이 하십시오.

_this_.router.navigateByUrl('/feature-2');

or

_this_.router.navigate(['/feature-2']);

탐색 중에 로드 마이크로스피커를 표시하려면 다음과 같이 하십시오.

// in app.component.ts

_private_ _isLoading$: BehaviorSubject<_boolean_> = _new_ BehaviorSubject<_boolean_>(_false_);

_constructor_(_private_ router: Router) {
}

_public_ ngOnInit(): _void_ {
  _this_.router.events.pipe(
    _filter_((event: _Event_) => event _instanceof_ NavigationStart)
  ).subscribe(() => _this_._isLoading$.next(_true_));

  _this_.router.events.pipe(
    _filter_((event: _Event_) => event _instanceof_ NavigationEnd)
  ).subscribe(() => _this_._isLoading$.next(_false_));
}

404페이지 정의

응용 프로그램에 없는 URL은 어떻게 처리합니까?
다시 한 번, Angular는 그것을 위해 준비를 했다.이렇게 와일드카드 라우트를 정의할 수 있습니다.

// app-routing.module.ts

{
  path: '**', component: PageNotFoundComponent
}

이것은 현재 요청에 대응하는 URL이 없으면, 표시된 구성 요소는 PageNotFoundComponent입니다.

결론

현재, 응용 프로그램에서 루트를 사용할 수 있어야 합니다.만약 당신이 모른다면 저에게 알려 주십시오. 나는 당신이 약간 낙담한 것을 알고 있지만, 나는 가능한 한 빨리 수위, 해석 프로그램, 플러그인 루트, 마운트 지연에 관한 글을 쓸 것을 보장합니다.
여기서 당신은 나의 프로젝트를 방문할 수 있으며, 나는 그것으로 중형 문장을 쓸 수 있다.
GitHub - GaetanRdn/medium-angular: This project is a support for my medium articles.
읽어주셔서 감사합니다!

자세히 보기

Angular for everyone: All about it