Angular2 beta14 Typescript routerLink Binding Fehler

Question

Ich versuche, einen Assistenten mit Angular2-Router zu erstellen. Angular2 schlägt vor, eine Bootstrap-Hauptdatei zu haben, die alle App-Komponenten bootstrappt. Da ich kein SPA machen kann, möchte ich, dass jede Seite eigene Komponenten bootet.

bekomme ich folgende Fehlermeldung über routerLink, wenn ich die Anwendung ausführen:

„AUSNAHME: Template Parse-Fehler: Kann nicht binden‚Router‘, da es keine bekannte einheimische Eigenschaft (ist“ For = "#wizard of Wizards" [ausgewählt] = "SelectedWizard == wizard" [wert] = "wizard.name" [ERROR ->] [routerLink] = "'' + wizard.path + ''"> {{wizard. name}} "

Hier ist meine Seite Komponente:

/// <reference path="angular2/typings/browser.d.ts" /> 
/// <reference path="angular2/core.d.ts" /> 
/// <reference path="angular2/router.d.ts" /> 

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

import {Wizard1} from './wizard1'; 
import {Wizard2} from './wizard2'; 
import {Step1} from './step1'; 
import {Step2} from './step2'; 
import {Step3} from './step3'; 
import {Step4} from './step4'; 
import {Step5} from './step5'; 

@Component({ 
    selector: 'page', 
    template: 
'<div> 
    <select (change)="setSelectedWizard($event.target.value)"> 
     <option *ngFor="#wizard of Wizards" [selected]="SelectedWizard == wizard" [value]="wizard.name" [routerLink]="'' + wizard.path + ''">{{wizard.name}}</option> 
    </select> 
    <wizard1> 
     <step1> 
      <h1>First!</h1> 
     </step1> 
     <step2> 
      <h1>Second!</h1> 
     </step2> 
     <step3> 
      <h1>Third!</h1> 
     </step3> 
     <step4> 
      <h1>Fourth!</h1> 
     </step4> 
     <nav> 
      <button type="button" value="Next" [class]="(SelectedStepIndex == Steps.length) ? 'btn btn-primary hidden' : 'btn btn-default'" (click)="next()" [routerLink]="['' + Steps[SelectedStepIndex] + '']">Next</button> 
     </nav> 
     <router-outlet></router-outlet> 
    </wizard1> 
    <wizard2> 
     <step1> 
      <h1>First!</h1> 
     </step1> 
     <step5> 
      <h1>Fifth!</h1> 
     </step5> 
     <nav> 
      <button type="button" value="Next" [class]="(SelectedStepIndex == Steps.length) ? 'btn btn-primary hidden' : 'btn btn-default'" (click)="next()" [routerLink]="['' + Steps[SelectedStepIndex] + '']">Next</button> 
     </nav> 
     <router-outlet></router-outlet> 
    </wizard2> 
    <router-outlet></router-outlet> 
</div>' 
}) 
export class Page { 
    Wizards = [{name: 'wizard1', path:'/wizard1'}, {name: 'wizard2', path: '/wizard2'}]; 
    SelectedWizard = this.Wizards[0]; 

    setSelectedWizard(value) { 
     this.SelectedWizard = value; 
    } 
} 

bootstrap(Page, [ROUTER_PROVIDERS]); 
bootstrap(Wizard1, [ROUTER_PROVIDERS]); 
bootstrap(Wizard2, [ROUTER_PROVIDERS]); 
bootstrap(Step1); 
bootstrap(Step2); 
bootstrap(Step3); 
bootstrap(Step4); 
bootstrap(Step5); 

Wizard1

/// <reference path="angular2/core.d.ts" /> 
/// <reference path="angular2/router.d.ts" /> 

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

@RouteConfig([ 
    { path: '/wizard1', name: 'wizard1', component: Wizard1 } 
]) 
@Component({ 
    selector: 'wizard1', 
    template:`<div><ng-content></ng-content></div>` 
}) 
export class Wizard1 { 
    Steps = ['/Step1', '/Step2', '/Step3', '/Step4']; 
    SelectedStepIndex = 0; 

    next() { 
     ++this.SelectedStepIndex; 
    } 
} 

Wizard2

/// <reference path="angular2/core.d.ts" /> 
/// <reference path="angular2/router.d.ts" /> 

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

@RouteConfig([ 
    { path: '/wizard2', name: 'wizard2', component: Wizard2 } 
]) 
@Component({ 
    selector: 'wizard2', 
    template:`<div><ng-content></ng-content></div>` 
}) 
export class Wizard2 { 
    Steps = ['/Step1', '/Step5']; 
    SelectedStepIndex = 0; 

    next() { 
     ++this.SelectedStepIndex; 
    } 
} 

Alle Schritte dazu ähnlich sind, in ihren eigenen .ts Dateien

/// <reference path="angular2/core.d.ts" /> 
/// <reference path="angular2/router.d.ts" /> 

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

@RouteConfig([ 
    { path: '/Step1', name: 'Step1', component: Step1 } 
]) 
@Component({ 
    selector: 'step1', 
    template: `<div><ng-content></ng-content></div>` 
}) 
export class Step1 { 

} 

Was ist los? Warum funktioniert das nicht?

Umwelt

1. Visual Studio 2015 Update 1
2. ASP.NET 5 und MVC 6
3. DNX 4.5.1 und 5.0
4. Angular2 Typoskript

Answer 1

ROUTER_DIRECTIVES Ihrer Komponente Anbieter hinzufügen:

@Component({directives: [ROUTER_DIRECTIVES]}) 

Answer 2

Sie sind Fehlende ROUTER_DIRECTIVES fehlt zum Importieren auf Page Komponenten & Direktiven Option von ComponentMetaData, das ist der Grund, warum eckig & routerOutlet Direktive auf Seite nicht versteht. Sie unterhalb der Linie

import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from 'angular2/router'; 

Dann zu injizieren sind offensichtlich ROUTER_DIRECTIVES in dieser Komponente directives Option

@Component({ 
    selector: 'page', 
    //.... 
    //other options 
    //.... 
    directives: [ROUTER_DIRECTIVES] 
}) 

Ich bin mir nicht sicher, warum Sie bootstrap mehrere Male Sie Anwendung getan hat? Idealerweise sollte es nur eine main-component geben, andere Komponente wird davon Kind sein.