Angular2 beta14 Typescript routerLink绑定错误

13 浏览
0 Comments

Angular2 beta14 Typescript routerLink绑定错误

我正在尝试使用Angular2的路由器创建一个向导。Angular2建议有一个主引导文件，它将引导所有的应用程序组件。由于我不能做一个单页应用程序，我希望每个页面都引导自己的组件。

当我运行应用程序时，我得到了关于routerLink的以下错误：

"EXCEPTION：模板解析错误：

无法绑定到'routerLink'，因为它不是一个已知的本机属性（"For="#wizard of Wizards" [selected]="SelectedWizard == wizard" [value]="wizard.name" [ERROR ->][routerLink]="'' + wizard.path + ''">{{wizard.name}}

"

这是我的页面组件：

/// 
/// 
/// 
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:
'
    
    
        
            
First!

        
        
            
Second!

        
        
            
Third!

        
        
            
Fourth!

        
        
        
    
    
        
            
First!

        
        
            
Fifth!

        
        
        
    
    
'
})
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

/// 
/// 
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_PROVIDERS} from 'angular2/router';
@RouteConfig([
    { path: '/wizard1', name: 'wizard1', component: Wizard1 }
])
@Component({
    selector: 'wizard1',
    template:``
})
export class Wizard1 {
    Steps = ['/Step1', '/Step2', '/Step3', '/Step4'];
    SelectedStepIndex = 0;
    next() {
        ++this.SelectedStepIndex;
    }
}

Wizard2

/// 
/// 
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_PROVIDERS} from 'angular2/router';
@RouteConfig([
    { path: '/wizard2', name: 'wizard2', component: Wizard2 }
])
@Component({
    selector: 'wizard2',
    template:``
})
export class Wizard2 {
    Steps = ['/Step1', '/Step5'];
    SelectedStepIndex = 0;
    next() {
        ++this.SelectedStepIndex;
    }
}

所有的步骤都类似于这个，在它们自己的.ts文件中

/// 
/// 
import {Component} from 'angular2/core';
import {RouteConfig} from 'angular2/router';
@RouteConfig([
    { path: '/Step1', name: 'Step1', component: Step1 }
])
@Component({
    selector: 'step1',
    template: ``
})
export class Step1 {
}

发生了什么？为什么不起作用？

环境

  1. Visual Studio 2015更新1
  2. ASP.NET 5和MVC 6
  3. DNX 4.5.1和5.0
  4. Angular2 TypeScript
0

2 答案

0 Comments

Angular2 beta14与Typescript中的routerLink绑定错误的问题出现的原因是没有导入ROUTER_DIRECTIVES。

解决方法是在Page组件和directives选项的ComponentMetaData中导入ROUTER_DIRECTIVES，并在该组件的directives选项中注入ROUTER_DIRECTIVES。

以下是解决方法的具体代码示例：

import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from 'angular2/router';
@Component({
    selector: 'page',
    //....
    //other options
    //....
    directives: [ROUTER_DIRECTIVES]
})

文章中还提到了关于为什么多次执行bootstrap的问题，作者表示不确定为什么会多次执行bootstrap，理论上只应该有一个main-component，其他组件应该是它的子组件。

作者还提到他的页面是根组件，并且表示在SPA中，通常只会有一个这样的bootstrap。

最后，还提到了在A2中没有子父作用域的概念。

0
0 Comments

在Angular2 beta14版本中，出现了一个与Typescript routerLink绑定相关的错误。这个问题的原因是由于未将ROUTER_DIRECTIVES添加到组件提供者中。解决这个问题的方法是在组件提供者中添加ROUTER_DIRECTIVES。

解决方法如下：

@Component({
  selector: 'my-component',
  template: `
    My route
  `,
  providers: [{directives: [ROUTER_DIRECTIVES]}]
})
export class MyComponent { }

通过将ROUTER_DIRECTIVES添加到组件提供者中，可以解决Angular2 beta14版本中Typescript routerLink绑定的错误。

0