2016-03-28 9 views
1

コンポーネントコントローラのtypescriptとクラスでAngular 1.5.3のコンポーネントルータを試していますが、自分のコンポーネントに現在のルータをバインドしないでください:{$ router: '<'}。クロムデバッガのコンポーネントの$ ctrlを調べると、常に未定義と表示されます。ルーティング自体は期待どおりに機能しています(コンポーネントが表示され、ルーティングリンクが動作し、$ routerOnActivateが呼び出されます)。コードからナビゲートするには$ルータが必要です。

htmlページ:

<div ng-app="app"> 
     <app></app> 
    </div> 

コード

class AppCtrl { 
} 

var appComp: ng.IComponentOptions = { 
    template: `App <ng-outlet></ng-outlet>`, 
    $routeConfig: [ 
     { path: '/', name: 'List', component: 'listComp', useAsDefault: true }, 
     { path: '/new', name:'New', component:'newComp'} 
    ], 
    bindings: { $router: '<' }, 
    controller:AppCtrl 
}; 

class ListCtrl { 
    message = ''; 
    $routerOnActivate=() => { 
     this.message = 'is activated'; 
    } 
} 

var listComp: ng.IComponentOptions = { 
    template: `<div><h1>List : {{$ctrl.message}}</h1><a ng-link="['New']">new</a></div>`, 
    bindings: { $router: '<' }, 
    controller: ListCtrl 
}; 

class NewCtrl { 
    message = ''; 
    $routerOnActivate =() => { 
     this.message = 'New is activated'; 
    } 
} 

var newComp: ng.IComponentOptions = { 
    template: `<div><h2>New : {{$ctrl.message}}</h2></div>`, 
    bindings: { $router: '<' }, 
    controller: NewCtrl, 
} 


angular.module('app', ['ngComponentRouter']) 
    .value('$routerRootComponent', 'app') 
    .component('app', appComp) 
    .component('listComp', listComp) 
    .component('newComp', newComp) 
    ; 
+0

実装に関連して正しく見える、あなたは 'これ。$ルーターを使用する必要があります'内部のコンポーネントは –

+0

で動作するはずです。これは問題です。これはすべてのコンポーネントで$ routerが未定義です。 – rekna

+0

この問題をplunjrで再現できますか? –

答えて

0

わかりました私はそれをこのように書くために持っているので、コメントを追加するのに十分な評判を持っていません。私は同じ問題を抱えていて、$ルーターが私の「メイン」アプリコンポーネントで定義されていないことに気付きました。

私はアプリのエントリポイントコンポーネントで$ rootRouterを使用しましたが、子コンポーネントでは "this。$ router"を使用しました。このように動作していますが、これが予期した動作であるかどうか、または私が何か間違っているかどうかわかりません...

私は角度のドキュメントを次のように読んだときにその解決策になりました:https://docs.angularjs.org/guide/component-router ):

各コンポーネントには独自のルータがあります。 Angular 2と異なり、 依存インジェクタを使用してコンポーネントのルータを保持することはできません。 は$ rootRouterだけを注入できます。その代わりに、 ng-outletディレクティブが現在のルータを コンポーネントの$ router属性にバインドするという事実を利用します。

アプリのエントリポイント「<アプリ> < /アプリ>」NG-コンセントの内側ではありませんが、ので、多分それは何とかその

関連する問題