我在 Angular 2/4 中绝对是新的，我正在尝试以下问题。
我有这个具有此视图的自定义服务器组件：
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="list-group">
<a
[routerLink] = "['/servers', 5, 'edit']"
[queryParams] = "{allowEdit: '1'}" <!-- Query parameter ? -->
fragment = "loading" <!-- URL fragment #loading -->
href="#"
class="list-group-item"
*ngFor="let server of servers">
{{ server.name }}
</a>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<button class="btn btn-primary" (click)="onReload()">Reload Page Navigating Programatically</button>
<a routerLink="/servers">Reload Page</a>
<!--<app-edit-server></app-edit-server>-->
<hr>
<app-server></app-server>
</div>
</div>
这是该组件的控制器：
import { Component, OnInit } from '@angular/core';
import { ServersService } from './servers.service';
import {ActivatedRoute, Router} from '@angular/router';
@Component({
selector: 'app-servers',
templateUrl: './servers.component.html',
styleUrls: ['./servers.component.css']
})
export class ServersComponent implements OnInit {
private servers: {id: number, name: string, status: string}[] = [];
constructor(private serversService: ServersService,
private router: Router,
private route: ActivatedRoute) { }
ngOnInit() {
this.servers = this.serversService.getServers();
}
/**
* relativeTo specify the relative route and can be used to use relative path as '/servers' when the
* programatica navigation is used
*/
onReload() {
this.router.navigate(['/servers'], {relativeTo: this.route});
}
}
如您所见，此组件包含此子组件 具有此视图：
<h5>{{ server.name }}</h5>
<p>Server status is {{ server.status }}</p>
和这个控制器类：
import { Component, OnInit } from '@angular/core';
import { ServersService } from '../servers.service';
@Component({
selector: 'app-server',
templateUrl: './server.component.html',
styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {
server: {id: number, name: string, status: string};
constructor(private serversService: ServersService) { }
ngOnInit() {
this.server = this.serversService.getServer(1); // retrieve the specific server related to this ID
}
}
最后这是我的 app.module.ts 文件，其中包含我的路线：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { UsersComponent } from './users/users.component';
import { ServersComponent } from './servers/servers.component';
import { UserComponent } from './users/user/user.component';
import { EditServerComponent } from './servers/edit-server/edit-server.component';
import { ServerComponent } from './servers/server/server.component';
import { ServersService } from './servers/servers.service';
import {RouterModule, Routes} from '@angular/router';
/**
* It specify a path and the component that have to be showed as a page for this path (but still a single page application).
* The view of the component is replaced in the DOM of outr single page by Angular
* @type {[{path: string; component: UserComponent}]}
*/
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'users', component: UsersComponent },
{ path: 'users/:id/:name', component: UserComponent}, /* Single parametrized (:id) user */
{ path: 'servers', component: ServersComponent },
{ path: 'servers/:id/edit', component: EditServerComponent }
]
@NgModule({
declarations: [
AppComponent,
HomeComponent,
UsersComponent,
ServersComponent,
UserComponent,
EditServerComponent,
ServerComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(appRoutes) // Register our routes in our application
],
providers: [ServersService],
bootstrap: [AppComponent]
})
export class AppModule { }
问题在于尝试访问此网址： http://localhost:4200/servers （指向此路线 {路径：＆＃39;服务器＆＃39;，组件：ServersComponent }，
ServersComponent 视图未显示，我在JavaScript浏览器控制台中获取此错误消息：
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
core.es5.js:1020 ERROR Error: Uncaught (in promise): InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '--' is not a valid attribute name.
Error: Failed to execute 'setAttribute' on 'Element': '--' is not a valid attribute name.
at EmulatedEncapsulationDomRenderer2.DefaultDomRenderer2.setAttribute (platform-browser.es5.js:2825)
at DebugRenderer2.setAttribute (core.es5.js:13653)
at createElement (core.es5.js:9177)
at createViewNodes (core.es5.js:12146)
at callViewAction (core.es5.js:12626)
at execComponentViewsAction (core.es5.js:12535)
at createViewNodes (core.es5.js:12207)
at createRootView (core.es5.js:12075)
at callWithDebugContext (core.es5.js:13458)
at Object.debugCreateRootView [as createRootView] (core.es5.js:12775)
at EmulatedEncapsulationDomRenderer2.DefaultDomRenderer2.setAttribute (platform-browser.es5.js:2825)
at DebugRenderer2.setAttribute (core.es5.js:13653)
at createElement (core.es5.js:9177)
at createViewNodes (core.es5.js:12146)
at callViewAction (core.es5.js:12626)
at execComponentViewsAction (core.es5.js:12535)
at createViewNodes (core.es5.js:12207)
at createRootView (core.es5.js:12075)
at callWithDebugContext (core.es5.js:13458)
at Object.debugCreateRootView [as createRootView] (core.es5.js:12775)
at resolvePromise (zone.js:783)
at resolvePromise (zone.js:754)
at zone.js:831
at ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.invokeTask (zone.js:423)
at Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:595)
at <anonymous>
defaultErrorLogger @ core.es5.js:1020
ErrorHandler.handleError @ core.es5.js:1080
next @ core.es5.js:4503
schedulerFn @ core.es5.js:3635
SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
SafeSubscriber.next @ Subscriber.js:185
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ core.es5.js:3621
(anonymous) @ core.es5.js:3912
ZoneDelegate.invoke @ zone.js:391
Zone.run @ zone.js:141
NgZone.runOutsideAngular @ core.es5.js:3844
onHandleError @ core.es5.js:3912
ZoneDelegate.handleError @ zone.js:395
Zone.runGuarded @ zone.js:157
_loop_1 @ zone.js:666
api.microtaskDrainDone @ zone.js:675
drainMicroTaskQueue @ zone.js:603
Promise resolved (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:413
Zone.scheduleTask @ zone.js:235
Zone.scheduleMicroTask @ zone.js:255
scheduleResolveOrReject @ zone.js:829
ZoneAwarePromise.then @ zone.js:918
PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4537
PlatformRef_.bootstrapModule @ core.es5.js:4522
122 @ main.ts:11
__webpack_require__ @ bootstrap 7f61d62415a6f5810bca:52
290 @ main.bundle.js:663
__webpack_require__ @ bootstrap 7f61d62415a6f5810bca:52
webpackJsonpCallback @ bootstrap 7f61d62415a6f5810bca:23
(anonymous) @ main.bundle.js:1
为什么呢？怎么了？我错过了什么？我该如何解决这个问题呢？