angular - 无法绑定(bind)到 'href'，因为它不是已知的 native 属性

Question

我是 Angular 2 的新手，我正在学习 Udemy 上的这门处于测试阶段的类(class)。

现在我想将我的项目升级到发布候选版本，我遇到了一个我在网上找不到任何地方的错误。

在我的 main.ts 中 我有这样的东西:

---

import {bootstrap} from '@angular/platform-browser-dynamic';
import {Component, OnInit, provide} from '@angular/core';
import {RegistrationComponent} from '../src/register/registratration.component.ts'
import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Routes, Route, Router} from "@angular/router";
import {TempComponent} from "../src/register/temp.component.ts";
import {WorkComponent} from "../src/work/work.component.ts";
import {OrderComponent} from "../src/order/order.component.ts";
import {SignInComponent} from "../src/sign-in/sign-in.component.ts";
import {APP_BASE_HREF, HashLocationStrategy, LocationStrategy, Location} from '@angular/common';

///<reference path="/assets/jquery.d.ts" />

import jQuery = require('jquery');


@Component({
    selector: 'my-app',
    templateUrl: './src/app.component.html',
    directives:[RegistrationComponent, TempComponent, WorkComponent, OrderComponent, SignInComponent, ROUTER_DIRECTIVES]
})

@Routes([
    {path:'/temp', name: 'Temp', component: TempComponent},
    {path:'/registration', name:'Registration', component: RegistrationComponent},
    {path: '/work', name:'Work', component: WorkComponent},
    {path: '/order', name:'Order', component: OrderComponent},
    {path: '/sign-in/...', name:'Sign-In', component: SignInComponent}

    // new AsyncRoute({
    //     path: '/lazy',
    //     loader: () => ComponentHelper.LoadComponentAsync('LazyLoaded','./components/lazy-loaded/lazy-loaded'),
    //     name: 'Lazy'
    // })
])

export class AppComponent implements OnInit{
    public clicked:boolean;
    constructor(private router: Router) {}

    // //new router
    // router:Router;
    // location: Location;
    // constructor(router:Router, location:Location)
    // {
    //     this.router = router;
    //     this.location = location;
    // }
    //
    // getLinkStyle(path)
    // {
    //     return this.location.path() === path;
    // }

    ngOnInit():any {
        this.router.navigate([null]);
        this.clicked =false;
        console.log('on init');
    }

    public onClick($event:Event){
        if(this.clicked)
        {
            this.clicked = false;
        }
        else{
            this.clicked = true;
        }
    }



}
bootstrap(AppComponent,[ provide(APP_BASE_HREF, { useValue: "/" }),
                        ROUTER_PROVIDERS,
                        provide(LocationStrategy, {useClass: HashLocationStrategy})]);

在我的 app.component.html 中有

<h1>Sample</h1>
<nav>

    <button [routerLink]="['/Registration']">Register</button>
    <button [routerLink]="['/Temp']">Temporary</button>
    <button [routerLink]="['/Sign-In', 'Sign-In-Form']">Sign-In</button>
    <button [routerLink]="['/Temp']">Temporary</button>
</nav>
<router-outlet></router-outlet>

我得到的错误是这样的:

 EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'href' since it isn't a known native property ("
<nav>
    <!--<button [routerLink]="['/Registration']"></button>-->
    [ERROR ->]<button routerLink="['/Registration']">Register</button>
    <!--<button [routerLink]="['/Registrati"): AppComponent@4:4

有没有人遇到过这个问题，我该如何解决。如果有任何帮助，我将不胜感激。

提前谢谢你。

Answer 1

不确定这是否会解决问题，但是请尝试使用超链接而不是按钮，

<a [routerLink]="['/Registration']">Register</a>