Angular2 beta14 Typescript routerLink绑定错误[重复]

Posted 2023-03-13

【中文标题】Angular2 beta14 Typescript routerLink绑定错误[重复]

【英文标题】：Angular2 beta14 Typescript routerLink binding error [duplicate]

【发布时间】：2016-08-07 21:55:58

【问题描述】：

我正在尝试使用 Angular2 的路由器创建一个向导。 Angular2 建议有一个主引导文件，它将引导所有应用程序组件。由于我无法进行 SPA，因此我希望每个页面都引导它自己的组件。

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

“例外：模板解析错误： 无法绑定到“routerLink”，因为它不是已知的本机属性（“For="#wizard of Wizards" [selected]="SelectedWizard == wizard" [value]="wizard.name" [ERROR -> ][routerLink]="'' + wizard.path + ''">wizard.name "

这是我的页面组件：

/// <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);

向导1

/// <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;
    

向导2

/// <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 和 MVC 6 DNX 4.5.1 和 5.0 Angular2 打字稿

【参考方案1】：

You are missing ROUTER_DIRECTIVES is missing to import on Page components & directives 选项 ComponentMetaData，这就是为什么 Angular 无法理解页面上的 routerLink 和 routerOutlet 指令。包括以下行

import ROUTER_PROVIDERS, ROUTER_DIRECTIVES from 'angular2/router';

然后显然在该组件directives选项中注入ROUTER_DIRECTIVES

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

我不知道你为什么多次申请bootstrap你？理想情况下应该只有一个main-component，其他组件将是它的子组件。

【讨论】：

它不是一个单页应用程序。就像您在 SPA 中所说的那样，您将拥有一个根。在我的例子中，每个页面都是根组件。

@Hani 拥有main-component 不是SPA 特定的东西.. 在这种情况下你也可以拥有单个应用程序根，不是吗？那你得到的错误呢？解决了吗？

我的页面是根。是的，我可以将引导程序放在一个单独的文件中，但是我需要每个页面都有这样的文件。在 SPA 中，您将拥有一个这样的引导程序。

嗯...现在它说步骤未定义。这是否意味着范围仍然是父页面？

@Hani A2 中没有子和父范围概念。

【参考方案2】：

将ROUTER_DIRECTIVES 添加到您的组件提供商：

@Component(directives: [ROUTER_DIRECTIVES])