BinaryDevelop
  1. ホーム
  2. アンギュラー

[解決済み】Angular2 Exception: routerLink'が既知のネイティブプロパティではないため、バインドできない。

2022-04-02 08:19:47

質問

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 { }

routing-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>
        "): AppComponent@2:11

ここに何となく関連する問題を発見しました。 angular2.0.0-beta.0 にアップグレードすると、ルータリンクディレクティブが壊れる。 . しかし、回答の一つにある "working example" はベータ以前のコードに基づいています - それはまだ十分に動作するかもしれませんが、私は私が作成したコードが動作しない理由を知りたいのです。

何かご指摘がありましたら、よろしくお願いします。

解決方法は？

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> を必要とする web-components の仕様と互換性を持たせるためです。 - をカスタム要素の名前として使用します。

グローバルに登録する

を作るには ROUTER_DIRECTIVES グローバルに利用できるようにするには、このプロバイダを bootstrap(...) : 

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

を追加する必要はありません。 ROUTER_DIRECTIVES を各コンポーネントに追加します。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します