无法使用ROUTER_DIRECTIVES绑定angular2中的模板 [英] Unable to bind template in angular2 with ROUTER_DIRECTIVES
问题描述
无法使用角度为2的ROUTER_PROVIDERS设置主页模板
我的代码是：
main.ts文件：
来自
Unable to set home template with ROUTER_PROVIDERS in angular 2
My code is:
main.ts file:
import { bootstrap } from 'angular2/platform/browser';
import { bind } from 'angular2/core';
import { ROUTER_PROVIDERS } from 'angular2/router';
import { AppComponent } from './app.component';
bootstrap(AppComponent, [ROUTER_PROVIDERS]).then(
success => console.log('AppComponent bootstrapped!'),
error => console.log(error)
);
app.component.ts：
app.component.ts:
import { Component } from 'angular2/core';
import { ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
import { HomeComponent } from './home/home.component';
@Component({
selector: 'my-app',
template: `<router-outlet></router-outlet>`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{ path: '/', as: 'Home', component: HomeComponent, useAsDefault: true }
])
export class AppComponent {
constructor() {
}
}
home.component.ts：
home.component.ts :
import {Component} from 'angular2/core';
import { RouterLink } from 'angular2/router';
@Component({
selector: 'home',
templateUrl: 'app/home/home.component.html',
directives: [RouterLink]
})
export class HomeComponent{}
我的index.html是：
My index.html is:
<html>
<head>
<title>angular 2 sample application</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/styles.css" rel="stylesheet" />
<script src="scripts/es6-shim.js"></script>
<script src="scripts/es6-shim.min.js"></script>
<script src="scripts/system-polyfills.js"></script>
<script src="scripts/shims_for_IE.js"></script>
<script src="scripts/zone.min.js"></script>
<script src="scripts/long-stack-trace-zone.js"></script>
<script src="scripts/Reflect.js"></script>
<script src="scripts/system.src.js"></script>
<script src="scripts/Rx.js"></script>
<script src="scripts/angular2.dev.js"></script>
<script src="scripts/router.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: { // must match your folder name
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<base href="/">
<!-- 3. Display the application -->
<body>
<header >
</header>
<main class="container">
<my-app>Loading...</my-app>
</main>
<footer>
</footer>
</body>
</html>
我用sul文件夹里面的gulpfile创建了脚本。
请查看这个例子< aWref =https://github.com/DanWahlin/Angular2-JumpStart> DanWahlin的漂亮应用程序
运行应用程序时没有任何错误。
我尝试了什么：
i尝试了上述链接，并且工作正常很好。
I have created the script with gulpfile inside src folder.
Please check this example nice app by DanWahlin
I am not getting any error running the application.
What I have tried:
i have tried with above mentioned link and that are working perfectly fine.
推荐答案
Hello Bikram Chhentri，
我还不太确定。在官方教程 [ ^ ]，他们还注册ROUTER_PROVIDER 他们的主要组件装饰。最终只是导入它是不够的。
Hello Bikram Chhentri,
I'm not quite sure yet. In the official tutorial[^] on angular.io, they also register the ROUTER_PROVIDER in their main component decorator. Eventually just importing this, isn't enough.
// app/app.component.ts
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<a [routerLink]="['Heroes']">Heroes</a>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES],
providers: [
ROUTER_PROVIDERS, <<< <<< <<<
HeroService
]
})
如果能解决您的问题，请告诉我。
- Konstantin
Please let me know, if this can solve your issue.
– Konstantin
Hi Here the correct way to resolve this issue of template binding.
app.component.ts:
import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
import { HomeComponent} from './ HomeComponent';
@Component({
selector: 'my-app',
template: `
<router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{ path: '/Home', name: 'Home', component: HomeComponent, useAsDefault: true },
])
export class AppComponent { }
home.component.ts :
import { Component } from 'angular2/core';
import { ROUTER_DIRECTIVES } from 'angular2/router';
import { HTTP_PROVIDERS, Http } from 'angular2/http';
import { AppComponent } from './app.component';
import { Router } from 'angular2/router';
@Component({
selector: home,
templateUrl: home/home.component.html,
directives: [ROUTER_DIRECTIVES],
providers: [HTTP_PROVIDERS]
})
export class HomeComponent{}
试试这个让我知道
Try this and let me know
这篇关于无法使用ROUTER_DIRECTIVES绑定angular2中的模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
