would you like to add angular routing(y/n)




RouterLink لا يعمل (4)

يعمل التوجيه الخاص بي في تطبيقات angular2 بشكل جيد. لكنني سأقوم بعمل بعض مسارات الربط على أساس this :

هنا هو التوجيه الخاص بي:

const routes: RouterConfig = [
    { path:'home' , component: FormComponent  },
    { path:'about', component: AboutComponent },
    { path:'**'   , component: FormComponent  }
];

وهنا الروابط التي صنعتها:

<ul class="nav navbar-nav item">
                    <li>
                        <a routerLink='/home' routerLinkActive="active">Home</a>
                    </li>
                    <li>
                        <a routerLink='/about' routerLinkActive="active">About this</a>
                    </li>
</ul>

أتوقع ذلك ، عندما أنقر عليها ، ينتقل إلى المكون المحترم ، لكنهم لا يؤدون أي شيء؟


استخدامه مثل هذا لمعلومات mroe قراءة هذا this

<a [routerLink]="['/about']">About this</a>

الرمز الذي تظهره صحيح تمامًا.

أظن أن مشكلتك هي أنك لا تقوم باستيراد RouterModule (وهو المكان الذي يتم فيه الإعلان عن RouterLink) في الوحدة التي تستخدم هذا القالب.

واجهت مشكلة مماثلة واستغرق الأمر بعض الوقت لحل لي لأن هذه الخطوة لم يرد ذكرها في الوثائق.

لذا انتقل إلى الوحدة التي تعلن عن المكون باستخدام هذا القالب وأضف:

import { RouterModule } from '@angular/router';

ثم إضافته إلى واردات الوحدات الخاصة بك على سبيل المثال

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [MyTemplatesComponent]
})
export class MyTemplatesModule { }

إلى جانب وجود عبارات الاستيراد الصحيحة ، ستحتاج أيضًا إلى مكان لعرض رابط التوجيه هذا ، وهو في عنصر <router-outlet></router-outlet> ، بحيث يلزم أيضًا وضعه في مكان ما في HTML الخاص بك الترميز حتى يعرف الموجه مكان عرض تلك البيانات.


حاول تغيير الروابط على النحو التالي:

  <ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this</a>
    </li>
  </ul>

أضف أيضًا ما يلي في رأس index.html:

<base href="/">


لا تنس هذا لإضافة هذا أدناه في القالب الخاص بك:

<router-outlet></router-outlet>






angular2-routing