각도 기본 사항-6

각도 기본 사항-6

반응형

Angular Basics의 6부에 오신 것을 환영합니다. 이 포스트에서 라우팅으로 경로를 변경하는 방법을 배우겠습니다. 이 프로젝트의 시작점은 이 zip 파일에서 가져올 수 있습니다.

localhost에서 프로젝트를 실행하면 탭이 다른 단순 프로젝트를 찾을 수 있습니다. 그것은 지금 작동하지 않고 있고 우리가 고칠 것이다.

저희 프로젝트에는 가정, 서버, 사용자라는 세 가지 구성요소가 있습니다. app.component.html 파일에는 모두 로드하고 있습니다.

프로젝트에 라우팅을 추가하려면 app.module.ts 파일에 경로를 추가해야 하며, 이 경로는 구성 요소에 매핑됩니다.

이제 app.component.html 파일로 돌아가면 라우터 출구가 있고 다른 구성 요소를 제거합니다.

경로를 수동으로 지정하면 로컬 호스트에서는 경로가 제대로 작동합니다.

이제 링크 작업을 위한 논리를 프로젝트에 추가하겠습니다. app.component.html 파일에 지시 routerLink를 추가할 것이며, 이를 사용하는 방법은 두 가지가 있습니다.

이제 앱에서 링크를 클릭하면 올바른 경로로 이동합니다.

이제, 우리는 우리의 현재 경로에 대한 시각적 표시를 얻기 위해 노력할 것이다. 동일한 용도로 routerLinkActive를 사용할 것입니다. 또한 매번 일치하지 않는 라우터에 대해 홈 경로에 routerLinkActiveOptions를 제공해야 합니다.

이 외에도 절대 경로로 작업할 수 있기 때문에 /서버를 서버에 업데이트했습니다.

이제 하이라이트가 제대로 표시됩니다.

이제, 우리는 경로를 프로그래밍 방식으로 적재하는 방법을 배울 것이다. 이를 위해 먼저 home.component.html 파일에 버튼이 있으며, 이 버튼을 클릭하면 Load서버에 있는 함수를 호출합니다.

이제 home.component.ts 파일에서 라우터.navigate를 사용하여 서버 경로로 이동할 것입니다.

이제 홈 페이지에 Load Server 버튼이 있으며 이 버튼을 클릭하면 서버 페이지로 이동합니다.

이제 다른 경로를 추가하여 응용 프로그램을 향상시키겠습니다. 우리는 기본적으로 우리의 노선에 매개변수를 추가하고 있다.

app.module.ts 파일에서 ID와 이름 매개 변수를 사용하는 새 경로를 추가합니다.

이제 사용자 구성 요소에서 경로로 액세스할 수 있습니다.snapshot.params. user.component.ts 파일에 ID와 이름을 가진 사용자를 추가합니다.

이제 user.component.html 파일을 통해 동일한 내용을 표시할 수 있습니다.

이제 http://localhost:4200/users/1/nabendu 경로로 이동하면 데이터가 표시됩니다.

이제, 우리는 한 가지 문제에 대해 알아보겠습니다. 여기서 user.component.html 파일에 routerLink를 추가합니다.

이제 링크를 클릭하면 링크가 변경되지만 데이터는 변경되지 않습니다. 이것은 우리가 이 변화에 적극적으로 귀를 기울이지 않기 때문에 발생한다.

이런 경우, 우리는 그러한 변화에 적극적으로 귀를 기울이는 관찰 가능한 것을 사용해야 합니다. user.component.ts 파일에 같은 내용을 추가하겠습니다.

이제 우리의 링크는 완벽하게 작동할 것이다.

다음으로, 앱에서 쿼리 매개 변수와 조각을 추가하는 방법을 배우겠습니다. app.module.ts 파일에 id와 edit로 새로운 경로를 만들 것입니다.

그런 다음 home.component.html 파일로 이동하여 값 1을 onLoadServer 함수에 추가합니다.

이제 home.component.ts 파일에서 id를 추가하고 편집할 것입니다. 우리는 또한 질의패람과 파편을 통과시켜야 한다.

이제 edit-server.component.ts 파일에서 queryParams와 fragment를 가져올 수 있습니다.

이제 Load Server 버튼을 클릭할 때 홈 페이지에서 Edit Server 페이지로 이동하며 콘솔 로그에서 쿼리패람과 조각을 볼 수 있습니다.

이렇게 하면 시리즈의 6부가 완성됩니다. 7부에서 배선을 완료하겠습니다. 이 부분의 코드는 이 Github repo에서 찾을 수 있다.

from http://it-ground.tistory.com/200 by ccl(A) rewrite - 2021-09-23 03:01:10