Angular2路由

发布时间：2020-12-17 08:32:54 所属栏目：安全来源：网络整理

导读：我在Angular中遵循 this路由教程,它只是不起作用.当我使用’comp’选择器来放置它的HTML代码时,它可以工作,但当我尝试使用router-outlet路由它时,它只显示index.html的标题. 我有以下内容： main.ts： import * as ng from 'angular2/angular2';import {Comp

我在Angular中遵循 this路由教程,它只是不起作用.当我使用’comp’选择器来放置它的HTML代码时,它可以工作,但当我尝试使用router-outlet路由它时,它只显示index.html的标题.

我有以下内容：

main.ts：

import * as ng from 'angular2/angular2';
import {Comp} from './comp';
@ng.Component({
    selector: 'my-app'
})
@ng.View({
    directives: [ng.formDirectives,ng.RouterOutlet],template: `
    <nav>
      <ul>
        <li>Start</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
    <main>
      <router-outlet></router-outlet>
    </main>
  `
})
@ng.RouteConfig([{ path: '/',component: Comp }])
class AppComponent {
}
ng.bootstrap(AppComponent,[ng.routerInjectables]);

comp.ts：

import * as ng2 from 'angular2/angular2';
@ng2.Component({
    selector: 'comp'
})
@ng2.View({
    template: `
    <h1>hi<h1>
  `
})
export class Comp {
    constructor() {
    }
}

index.html的：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test3</title>
    <script src="lib/traceur/traceur.js"></script>
    <script src="lib/system.js/dist/system.js"></script>
    <script src="lib/angular2-build/angular2.js"></script>
    <script src="lib/angular2-build/router.dev.js"></script>
    <script>
        System.config({
            packages: { 
                'js': {
                    defaultExtension: 'js'
                } 
            }
        });
        System.import('/js/main');
    </script>
</head>
<body>
    <h1>Hello There</h1>
    <my-app></my-app>
</body>
</html>

在angular@2.0.0-alpha.41中引入了重大变化

> routerInjectables已重命名为ROUTER_BINDINGS
>然后将ROUTER_BINDINGS重命名为ROUTER_PROVIDERS

旁白：最近发生了很多重大变化,因此几乎所有在线示例都不可靠.

使用ROUTER_PROVIDERS

这包括：

> RouteRegistry – 已定义路线的注册表
> LocationStrategy = PathLocationStragety – 按路径匹配路线

这基本上是使用默认设置引导路由器的快捷方式.

例如：

@Component ({
...
})
@View ({
...
})
@RouteConfig ({
...
})
class App {}

bootstrap(App,[ ROUTER_PROVIDERS ]);

资料来源：

> angular/CHANGELOG.md
> angular/pr#4654

（编辑：李大同）

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