我试图用Angular2的路由器创建一个向导。 Angular2建议有一个主引导文件,它将引导所有的应用程序组件。由于我无法做SPA,我希望每个页面都能引导它自己的组件。Angular2 beta14 Typescript routerLink绑定错误
我得到routerLink
以下错误,当我运行应用程序:
“EXCEPTION:模板解析错误: 不能绑定到‘routerLink’,因为它不是一个已知的原生属性(”对于= “#Wizard of Wizards”[selected] =“SelectedWizard == wizard”[value] =“wizard.name”[ERROR - >] [routerLink] =“''+ wizard.path +''”> {{wizard。名}} “
这是我的页面组件:
/// <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;
}
}
所有步骤都与此类似,在自己的.ts文件
/// <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 {
}
这是怎么回事?为什么这不起作用?
环境
- 的Visual Studio 2015年更新1
- ASP.NET 5和6 MVC
- DNX 4.5.1和5.0
- Angular2打字稿
它不是一个单一的网页应用程序。你会有一个像你在SPA中所说的根。在我的情况下,每个页面都是根组件。 – RoninCoder
@Hani拥有'main-component'不是'SPA'特定的东西..你可能在这种情况下也有单一的应用程序根目录,不是吗?那你得到的错误呢?这解决了吗? –
我的页面是根。是的,我可以将bootstrapping放在一个单独的文件中,但是之后每个页面都需要这样的文件。在SPA中,你会有一个这样的引导。 – RoninCoder