Angular2异常：无法绑定到’routerLink’,因为它不是一个已知的

发布时间：2020-12-17 09:10:00 所属栏目：安全来源：网络整理

导读：显然，Angular2的beta比新的更新，所以没有太多的信息，但我试图做我认为是一些相当基本的路由。使用快速启动代码和来自https://angular.io网站的其他片段进行攻击，导致了以下文件结构： angular-testapp/ app/ app.component.ts boot.ts routing-test.com

显然，Angular2的beta比新的更新，所以没有太多的信息，但我试图做我认为是一些相当基本的路由。

使用快速启动代码和来自https://angular.io网站的其他片段进行攻击，导致了以下文件结构：

angular-testapp/
    app/
        app.component.ts
        boot.ts
        routing-test.component.ts
    index.html

随着文件被填充如下：

index.html

<html>

  <head>
    <base href="/">
    <title>Angular 2 QuickStart</title>
    <link href="../css/bootstrap.css" rel="stylesheet">

    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null,console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {ROUTER_PROVIDERS} from 'angular2/router';

import {AppComponent} from './app.component'

bootstrap(AppComponent,[
    ROUTER_PROVIDERS
]);

app.component.ts

import {Component} from 'angular2/core';
import {RouteConfig,ROUTER_DIRECTIVES,ROUTER_PROVIDERS,LocationStrategy,HashLocationStrategy} from 'angular2/router';

import {RoutingTestComponent} from './routing-test.component';

@Component({
    selector: 'my-app',template: `
        <h1>Component Router</h1>
        <a [routerLink]="['RoutingTest']">Routing Test</a>
        <router-outlet></router-outlet>
        `
})

@RouteConfig([
    {path:'/routing-test',name: 'RoutingTest',component: RoutingTestComponent,useAsDefault: true},])

export class AppComponent { }

routing-test.component.ts

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

@Component({
    template: `
        <h2>Routing Test</h2>
        <p>Interesting stuff goes here!</p>
        `
})
export class RoutingTestComponent { }

尝试运行此代码会产生错误：

EXCEPTION: Template parse errors:
Can't bind to 'routerLink' since it isn't a known native property ("
        <h1>Component Router</h1>
        <a [ERROR ->][routerLink]="['RoutingTest']">Routing Test</a>
        <router-outlet></router-outlet>
        "): AppComponent@2:11

我在这里发现了一个模糊的相关问题; router-link directives broken after upgrading to angular2.0.0-beta.0.然而，答案之一的“工作示例”基于预beta代码 – 这仍然可以工作，但我想知道为什么我创建的代码不工作。

任何指针都会感谢！

= RC.5

导入RouterModule
参见https://angular.io/docs/ts/latest/guide/router.html

@NgModule({ 
  imports: [RouterModule],...
})

= RC.2

app.routes.ts

import { provideRouter,RouterConfig } from '@angular/router';

export const routes: RouterConfig = [
  ...
];

export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];

主要

import { bootstrap } from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from './app.routes';

bootstrap(AppComponent,[APP_ROUTER_PROVIDERS]);

< = RC.1 您的代码缺失

@Component({
    ...
    directives: [ROUTER_DIRECTIVES],...)}

您不能使用诸如routerLink或router-outlet的指令，而不让它们为您的组件所知。

虽然指令名称在Angular2中更改为区分大小写，但元素仍然使用 – 以像< router-outlet>以便与需要以自定义元素名称的web组件规范兼容。

注册全球

要使ROUTER_DIRECTIVES全局可用，请将此提供程序添加到bootstrap(…)：

provide(PLATFORM_DIRECTIVES,{useValue: [ROUTER_DIRECTIVES],multi: true})

则不再需要向每个组件添加ROUTER_DIRECTIVES。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!