[routerLink]와 routerLink의 차이점

[routerLink]와 routerLink의 차이점

사이의 차이점은 무엇입니까?[routerLink]그리고.routerLink각각을 어떻게 사용해야 합니까?

모든 지침에서 이를 확인할 수 있습니다.

괄호를 사용하면 바인딩 가능한 속성(변수)을 전달하는 것입니다.

  <a [routerLink]="routerLinkVariable"></a>

따라서 이 변수(routerLinkVariable)는 클래스 내에서 정의할 수 있으며 다음과 같은 값을 가져야 합니다.

export class myComponent {

    public routerLinkVariable = "/home"; // the value of the variable is string!

하지만 변수를 사용하면 동적으로 만들 수 있습니다. 그렇죠?

export class myComponent {

    public routerLinkVariable = "/home"; // the value of the variable is string!


    updateRouterLinkVariable(){

        this.routerLinkVariable = '/about';
    }

괄호가 없으면 문자열만 전달하고 변경할 수 없는 반면, 문자열은 하드 코딩되어 앱 전체에서 그렇게 됩니다.

<a routerLink="/home"></a>

업데이트:

routerLink 전용 괄호를 사용할 때의 또 다른 장점은 탐색 중인 링크에 동적 쿼리 매개 변수를 전달할 수 있다는 것입니다.

새 변수 추가

export class myComponent {
        private dynamicQueryParameter = '129';
        public routerLinkVariable = "/home"; 

[routerLink] 업데이트

  <a [routerLink]="[routerLinkVariable]"[queryParams]="{unit: dynamicQueryParameter}"></a>

이 링크를 클릭하려면 다음과 같이 하십시오.

  <a href="/home?unit=129"></a>

있다고 가정합니다.

const appRoutes: Routes = [
  {path: 'recipes', component: RecipesComponent }
];

<a routerLink ="recipes">Recipes</a>

Recipes 하이퍼링크를 클릭하면 http://localhost:4200/recipes로 이동합니다.

모수가 1이라고 가정합니다.

<a [routerLink] = "['/recipes', parameter]"></a>

즉, 동적 매개 변수 1을 링크에 전달한 다음 http://localhost:4200/recipes/1로 이동합니다.

라우터 링크

대괄호와 없음이 포함된 routerLink - 간단한 설명.

routerLink=와 [routerLink]의 차이는 대부분 상대 경로와 절대 경로와 비슷합니다.

ahref와 마찬가지로 ./about.dll 또는 https://your-site.com/about.html 로 이동할 수 있습니다.

괄호 없이 사용하는 경우 상대적으로 탐색하고 매개변수 없이 탐색합니다.

my-app.com/dashboard/client

my-app.com/dashboard 에서 my-app.com/dashboard/client 으로 "다운로드"

<a routerLink="client/{{ client.id }}" .... rest the same

괄호가 있는 routerLink를 사용할 때 앱을 실행하여 절대를 탐색하고 매개변수를 추가할 수 있습니다. 새 링크의 퍼즐은 어떻게 됩니까?

우선 대시보드/에서 대시보드/클라이언트/client-id로의 "점프"를 포함하지 않으며 편집 클라이언트에 더 유용한 클라이언트/client-id의 데이터를 가져옵니다.

<a [routerLink]="['/client', client.id]" ... rest the same

절대적인 방법 또는 대괄호 routerLink는 사용자 구성 요소와 app.routing.module.ts를 추가로 설정해야 합니다.

테스트를 수행할 때 오류가 없는 코드는 "[]의 목적이 무엇인지 자세히 알려줍니다."[] 여부와 상관없이 이 항목을 확인하십시오.위에서 언급한 것처럼 다이내믹 라우팅에 도움이 되는 실렉터를 사용하여 실험할 수 있습니다.

Angular.io 셀렉터

routerLink 구조 보기

https://angular.io/api/router/RouterLink#selectors

라우터 링크 지침:

[routerLink]="link"                  //when u pass URL value from COMPONENT file
[routerLink]="['link','parameter']" //when you want to pass some parameters along with route

 routerLink="link"                  //when you directly pass some URL 
[routerLink]="['link']"              //when you directly pass some URL

언급URL : https://stackoverflow.com/questions/41370760/difference-between-routerlink-and-routerlink