无法在本机元素上绑定 angular2 指令答案

【问题标题】：Can't bind angular2 directive on native element无法在本机元素上绑定 angular2 指令
【发布时间】：2015-11-22 12:53:03
【问题描述】：

我尝试创建一个简单的 angular2 组件，但在将指令绑定到本机 DOM 元素时出现错误。

例如：

/// <reference path="../../typings/_custom.d.ts" />

import { Component, View } from 'angular2/angular2';
import { RouterLink } from 'angular2/router';

@Component({
    selector: 'my-component',
    directives: [RouterLink]
})

@View({
    template: `
        <a [router-link]="['/page']">test</a>
    `
})

export class MyComponent {    }

=> 无法绑定到“routerLink”，因为它不是“”元素的已知属性，并且没有具有相应属性的匹配指令。

我做错了什么？

【问题讨论】：

嘿@tzi directives 属性必须放在View 注释中。
谢谢@EricMartinez。 -_-\/

标签： angular

【解决方案1】：

正如@EricMartinez 所说，“指令”是“视图”属性
正如@dSebastien 所说，“router-link”变成了“routerLink”
正如@pardeep-jain 所说，“angular2/angular2”变成了“angular2/core”，正在删除“View”注释，不需要打字线

这是正确的代码：

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

@Component({
    selector: 'my-component',
    directives: [RouterLink],
    template: `
        <a [routerLink]="['/page']">test</a>
    `
})

export class MyComponent {    }

【讨论】：

请注意，在 beta 版本中，router-link 变为 routerLink（对于 ngFor、ngIf、...）

【解决方案2】：

由于 Angular2 现在处于测试阶段，因此这里对这个问题进行了很多更改，其中很少有人对这个问题有所帮助。

import { Component, View } from 'angular2/angular2'

改为import {Component, View } from 'angular2/core' 有关根据 beta 的所有进口清单，请参见此处 https://stackoverflow.com/a/34697758/5043867

（在大多数情况下不需要使用视图注释，因为视图注释的所有功能都包含在组件注释中）。

不需要在组件顶部写打字行，因为 Angular 团队默认包含打字 https://github.com/angular/angular/blob/master/CHANGELOG.md#200-alpha42-2015-10-13
router-link改为routerLink

【讨论】：

@View() 注释正在被删除。