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

[routerLink] 업데이트

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

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

  <a href="/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로 이동 함을 의미합니다.

참고 URL : https://stackoverflow.com/questions/41370760/difference-between-routerlink-and-routerlink