显然,Angular2的测试版比新版本更新,所以没有太多信息,但我正在try 一些我认为相当基本的路由.

破解来自https://angular.io网站的快速入门代码和其他代码片段导致了以下文件 struct :

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.然而,其中一个答案中的"工作示例"是基于测试前的代码——这可能仍然有效,但我想知道为什么我创建的代码不起作用.

如有任何提示,我们将不胜感激!

推荐答案

>=RC.5

导入RouterModule

@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)];

main.ts

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],
    ...)}

如果不让组件知道指令,就不能使用routerLinkrouter-outlet之类的指令.

虽然指令名在Angular2中已更改为区分大小写,但元素名称中仍使用-,如<router-outlet>,以与web组件规范兼容,后者要求自定义元素的名称中使用-.

register globally

要使ROUTER_DIRECTIVES在全局可用,请将此Provider 添加到bootstrap(...):

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

这样就不再需要向每个组件添加ROUTER_DIRECTIVES.

Angular相关问答推荐

为什么当我在父组件中设置数组元素时,Angular重新创建子组件而不是更新它?

导致无限请求的Angular HttpInterceptor和HttpClientModule

Angular 和PrimeNg文件Uploader:渲染元件时如何显示选定文件的列表?

Rxjs重置执行后的可观察延迟并重新调度Angular

使用BLOB数据类型时,HTTPCLIENT中可能存在错误

使用 primeng Apollo 主题进行实时部署时多次加载 theme.css 和 preloading.css 文件

为什么Angular的ViewEncapsulation枚举有没有值为1的键?

ngrx 效果等到从初始值以外的其他状态收到响应

Nz 树 Select .如何在子 node 中显示父 node 名称?

在 Angular material 表单元格中渲染 html

如何在Cypress 测试中切换 Angular 选项卡

angular 13 ng 构建库失败(ivy部分编译模式)

不再需要 core-js 了吗?

Angular 4.3拦截器不起作用

当父组件上的变量发生变化时重新加载子组件

NG 测试中的调试测试

错误:angular2 中没有 HttpHandler 的提供者

ng add 与 npm install 在 Angular 6 中的区别

包 '@angular/cli' 不是依赖项

Hot and Cold observables:有 hot和 cold运算符吗?