cli - angularjs شرح




استثناء Angular2: لا يمكن ربط "routerLink" نظرًا لأنه ليس خاصية محلية معروفة (8)

إذا حصلت على هذا الخطأ أثناء اختبار الوحدة ، يرجى كتابة هذا.

import { RouterTestingModule } from '@angular/router/testing';
beforeEach(async(() => {
  TestBed.configureTestingModule({
   imports: [RouterTestingModule],
   declarations: [AppComponent],
 });
}));

من الواضح أن الإصدار التجريبي من Angular2 أحدث من الجديد ، لذلك لا يوجد الكثير من المعلومات ، لكنني أحاول القيام بما أعتقد أنه بعض التوجيه الأساسي إلى حد ما.

نتج عن الاختراق باستخدام شفرة البداية السريعة وغيرها من المقتطفات من موقع https://angular.io موقع الويب: بنية الملف التالية:

angular-testapp/
    app/
        app.component.ts
        boot.ts
        routing-test.component.ts
    index.html

مع الملفات التي يتم ملؤها كما يلي:

index.html و

<html>

  <head>
    <base href="/">
    <title>Angular 2 QuickStart</title>
    <link href="../css/bootstrap.css" rel="stylesheet">

    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {ROUTER_PROVIDERS} from 'angular2/router';

import {AppComponent} from './app.component'

bootstrap(AppComponent, [
    ROUTER_PROVIDERS
]);

app.component.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';

import {RoutingTestComponent} from './routing-test.component';

@Component({
    selector: 'my-app',
    template: `
        <h1>Component Router</h1>
        <a [routerLink]="['RoutingTest']">Routing Test</a>
        <router-outlet></router-outlet>
        `
})

@RouteConfig([
    {path:'/routing-test', name: 'RoutingTest', component: RoutingTestComponent, useAsDefault: true},
])

export class AppComponent { }

توجيه-test.component.ts

import {Component} from 'angular2/core';
import {Router} from 'angular2/router';

@Component({
    template: `
        <h2>Routing Test</h2>
        <p>Interesting stuff goes here!</p>
        `
})
export class RoutingTestComponent { }

محاولة تشغيل هذا الرمز ينتج الخطأ:

EXCEPTION: Template parse errors:
Can't bind to 'routerLink' since it isn't a known native property ("
        <h1>Component Router</h1>
        <a [ERROR ->][routerLink]="['RoutingTest']">Routing Test</a>
        <router-outlet></router-outlet>
        "): [email protected]:11

لقد وجدت مشكلة غامضة هنا ؛ توجيهات رابط التوجيه مقطوعة بعد الترقية إلى angular2.0.0-beta.0 . ومع ذلك ، فإن "المثال العملي" في أحد الإجابات يستند إلى رمز ما قبل الإصدار التجريبي - والذي قد لا يزال يعمل بشكل جيد ، لكنني أود أن أعرف لماذا لا تعمل الشفرة التي قمت بإنشائها.

سيتم تلقي أي مؤشرات بامتنان!


إذا كنت تستخدم الوحدات النمطية المشتركة ، فما عليك سوى إضافة RouterModule إلى وحدة نمطية حيث يتم الإعلان عن المكون الخاص بك ولا تنسَ إضافة <router-outlet></router-outlet>

يشار من هنا RouterLink لا يعمل


بالنسبة للأشخاص الذين يجدون هذا عند محاولة إجراء الاختبارات لأنه عبر npm test أو ng test باستخدام Karma أو أي شيء آخر. تحتاج الوحدة النمطية .spec إلى استيراد اختبار جهاز توجيه خاص حتى تتمكن من الإنشاء.

import { RouterTestingModule } from '@angular/router/testing';

  TestBed.configureTestingModule({
    imports: [RouterTestingModule],
    declarations: [AppComponent],
  });

http://www.kirjai.com/ng2-component-testing-routerlink-routeroutlet/


بشكل عام ، كلما تلقيت خطأً مثل " Can't bind to 'xxx' since it isn't a known native property ، فإن السبب المحتمل هو نسيان تحديد مكون أو توجيه (أو ثابت يحتوي على المكون أو التوجيه) في مجموعة بيانات التعريف directives . مثل الحال هنا.

نظرًا لأنك لم تحدد RouterLink أو ROUTER_DIRECTIVES الثابت - والذي يتضمن ما يلي :

export const ROUTER_DIRECTIVES = [RouterOutlet, RouterLink, RouterLinkWithHref, 
  RouterLinkActive];

- في مجموعة directives ، ثم عند تحليل الزاوي

<a [routerLink]="['RoutingTest']">Routing Test</a>

لا يعرف التوجيه RouterLink (الذي يستخدم routerLink محدد السمة ). نظرًا لأن Angular يعرف ماهية العنصر ، فإنه يفترض أن [routerLink]="..." يعد خاصية ملزمة للعنصر. لكنه يكتشف بعد ذلك أن routerLink ليس خاصية أصلية لعناصر ، وبالتالي فإنه يلقي استثناءًا حول الخاصية غير المعروفة.

لم يعجبني أبدًا غموض بناء الجملة . بمعنى ، النظر

<something [whatIsThis]="..." ...>

فقط من خلال النظر إلى HTML لا يمكننا معرفة ما إذا كان whatIsThis هو

  • ملكية محلية something
  • محدد سمة التوجيه
  • خاصية إدخال something

يجب أن نعرف directives: [...] المحددة في البيانات الأولية للمكون / التوجيه من أجل تفسير HTML عقلياً. وعندما ننسى وضع شيء ما في مجموعة directives ، أشعر أن هذا الغموض يجعل تصحيح الأخطاء أمرًا صعبًا بعض الشيء.


في حالتي ، قمت باستيراد جهاز التوجيه RouterModule في وحدة التطبيقات ولكن لم يتم استيراده في وحدة الميزات الخاصة بي. بعد استيراد وحدة التوجيه في EventModule بلدي الخطأ يذهب بعيدا.

import {NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {EventListComponent} from './EventList.Component';
import {EventThumbnailComponent} from './EventThumbnail.Component';
import { EventService } from './shared/Event.Service'
import {ToastrService} from '../shared/toastr.service';
import {EventDetailsComponent} from './event-details/event.details.component';
import { RouterModule } from "@angular/router";
@NgModule({
  imports:[BrowserModule,RouterModule],
  declarations:[EventThumbnailComponent,EventListComponent,EventDetailsComponent],
  exports: [EventThumbnailComponent,EventListComponent,EventDetailsComponent],
   providers: [EventService,ToastrService]
})
export class EventModule {

 }

لديك في الوحدة النمطية الخاصة بك

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

لديك لتصدير الوحدة النمطية RouteModule

مثال:

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

لتكون قادرة على الوصول إلى وظائف لجميع الذين يستوردون هذه الوحدة.


> = RC.5

استيراد RouterModule انظر أيضًا https://angular.io/guide/router

@NgModule({ 
  imports: [RouterModule],
  ...
})

> = RC.2

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';

export const routes: RouterConfig = [
  ...
];

export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from './app.routes';

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

<= RC.1

رمزك مفقود

  @Component({
    ...
    directives: [ROUTER_DIRECTIVES],
    ...)}

لا يمكنك استخدام التوجيهات مثل routerLink أو router-outlet دون جعلها معروفة للمكونات الخاصة بك.

في حين تم تغيير أسماء التوجيه بحيث تكون حساسة لحالة الأحرف في Angular2 ، فإن العناصر لا تزال تستخدم - في الاسم مثل <router-outlet> لتكون متوافقة مع مواصفات مكونات الويب التي تتطلب - في اسم العناصر المخصصة.

سجل على مستوى العالم

لجعل ROUTER_DIRECTIVES متاحًا عالميًا ، أضف هذا الموفر إلى bootstrap(...) :

provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true})

ثم لم يعد من الضروري إضافة ROUTER_DIRECTIVES إلى كل مكون.


كلمة تحذير عند الترميز باستخدام Visual Studio (2013)

لقد أهدرت 4 إلى 5 ساعات في محاولة لتصحيح هذا الخطأ. جربت جميع الحلول التي عثرت عليها على بواسطة الرسالة وما زلت حصلت على هذا الخطأ: Can't bind to 'routerlink' since it isn't a known native property

كن على دراية ، فإن Visual Studio لديه عادة سيئة في التنسيق التلقائي للنص عند نسخ / لصق الرمز. لقد حصلت دائمًا على تعديل فوري صغير من VS13 (تختفي حالة الإبل).

هذه:

<div>
    <a [routerLink]="['/catalog']">Catalog</a>
    <a [routerLink]="['/summary']">Summary</a>
</div>

يصبح:

<div>
    <a [routerlink]="['/catalog']">Catalog</a>
    <a [routerlink]="['/summary']">Summary</a>
</div>

إنه فرق بسيط ، لكن يكفي لإحداث الخطأ. أبشع جزء هو أن هذا الاختلاف البسيط استمر في تجنب انتباهي في كل مرة قمت بنسخها ولصقها. بالصدفة الهائلة رأيت هذا الفارق البسيط وحلها.





angular