[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 dynamicParameter = '129';
        public routerLinkVariable = "/home"; 

[routerLink] 업데이트

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

이 링크를 클릭하면 다음과 같이됩니다.

  <a href="https://stackoverflow.com/home/129"></a>

당신이 가지고 있다고 가정

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

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

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

매개 변수가 1이라고 가정합니다.

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

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

라우터 링크

대괄호가있는 routerLink 및 없음-간단한 설명.

routerLink =와 [routerLink]의 차이점은 대부분 상대 경로와 절대 경로와 같습니다.

href와 유사하게 ./about.html 또는 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를 사용하면 앱을 실행하여 절대 탐색하고 새 링크의 퍼즐이 어떻습니까?

우선 dashboard /에서 dashboard / client / client-id 로의 "점프"를 포함하지 않고 EDIT CLIENT에 더 도움이되는 client / 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