gpt4 book ai didi

Angular2 路由

转载 作者:太空狗 更新时间:2023-10-29 17:17:52 28 4
gpt4 key购买 nike

我正在关注 this Angular 中的路由教程,它就是行不通。当我使用“comp”选择器放置它的 HTML 代码时,它可以工作,但是当我尝试使用路由器 socket 对其进行路由时,它只显示来自 index.html 的 header 。

我有以下内容:

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

来源:

关于Angular2 路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32099933/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com