コンポーネントコントローラの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)
;
実装に関連して正しく見える、あなたは 'これ。$ルーターを使用する必要があります'内部のコンポーネントは –
で動作するはずです。これは問題です。これはすべてのコンポーネントで$ routerが未定義です。 – rekna
この問題をplunjrで再現できますか? –