Question

我对Angular 2很陌生，而且我正在关注Udemy的这个课程，该课程处于测试阶段。

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

在我的主页上我有这样的事情：

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>

无法绑定到＆＃39; href＆＃39;因为它不是一个已知的本地财产

1 个答案: