Fatal编程技术网
  • javascript/
  • Javascript 我在Angular2\4应用程序中获取此错误的原因：InvalidCharacterError:无法执行'；setAttribute'；在'；元素'；：'--'；不是有效的属性名称

Javascript 我在Angular2\4应用程序中获取此错误的原因：InvalidCharacterError:无法执行'；setAttribute'；在'；元素'；：'--'；不是有效的属性名称

javascript angular

Javascript 我在Angular2\4应用程序中获取此错误的原因：InvalidCharacterError:无法执行'；setAttribute'；在'；元素'；：'--'；不是有效的属性名称,javascript,angular,javascript-framework,angular-components,Javascript,Angular,Javascript Framework,Angular Components,我是一个全新的角度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'}"

我是一个全新的角度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>

<h5>{{ server.name }}</h5>
<p>Server status is {{ server.status }}</p>
如您所见，此组件包含此子组件，具有以下视图：

<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>

<h5>{{ server.name }}</h5>
<p>Server status is {{ server.status }}</p>
最后，这是我的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 { }
问题是，尝试访问此URL时：（指向此路由的路径：{path:'servers'，component: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

Angular正在开发模式下运行。请调用enableProdMode（）以启用生产模式。
core.es5.js:1020错误：未捕获（承诺中）：InvalidCharacterError:未能对“元素”执行“setAttribute”：“--”不是有效的属性名称。
错误：未能对“元素”执行“setAttribute”：“--”不是有效的属性名称。
在EmulatedEncapsulationDomRender2.DefaultDomRender2.setAttribute（platform browser.es5.js:2825）上
位于debugrender2.setAttribute（core.es5.js:13653）
在createElement（core.es5.js:9177）
在createViewNodes上（core.es5.js:12146）
在callViewAction（core.es5.js:12626）
在execComponentViewsAction（core.es5.js:12535）
在createViewNodes上（core.es5.js:12207）
在createRootView（core.es5.js:12075）
在callWithDebugContext（core.es5.js:13458）
在Object.debugCreateRootView[作为createRootView]（core.es5.js:12775）
在EmulatedEncapsulationDomRender2.DefaultDomRender2.setAttribute（platform browser.es5.js:2825）上
位于debugrender2.setAttribute（core.es5.js:13653）
在createElement（core.es5.js:9177）
在createViewNodes上（core.es5.js:12146）
在callViewAction（core.es5.js:12626）
在execComponentViewsAction（core.es5.js:12535）
在createViewNodes上（core.es5.js:12207）
在createRootView（core.es5.js:12075）
在callWithDebugContext（core.es5.js:13458）
在Object.debugCreateRootView[作为createRootView]（core.es5.js:12775）
在resolvePromise（zone.js:783）
在resolvePromise（zone.js:754）
在zone.js:831
在ZoneDelegate.invokeTask（zone.js:424）
位于Object.onInvokeTask（core.es5.js:3881）
在ZoneDelegate.invokeTask（zone.js:423）
在Zone.runTask（Zone.js:191）
在drainMicroTaskQueue（zone.js:595）
在
defaultErrorLogger@core.es5.js:1020
ErrorHandler.handleError@core.es5.js:1080
next@core.es5.js:4503
schedulerFn@core.es5.js:3635
SafeSubscriber.\uuu tryorunsubscriber@Subscriber.js:238
SafeSubscriber.next@Subscriber.js:185
订户。_next@Subscriber.js:125
Subscriber.next@Subscriber.js:89
Subject.next@Subject.js:55
EventEmitter.emit@core.es5.js:3621
（匿名）@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.runguared@Zone.js:157
_loop_1@zone.js:666
api.microtaskDrainDone@zone.js:675
drainMicroTaskQueue@zone.js:603
承诺已解析（异步）
scheduleMicroTask@zone.js:578
ZoneDelegate.scheduleTask@zone.js:413
Zone.scheduleTask@Zone.js:235
Zone.scheduleMicroTask@Zone.js:255
schedulesolveorreject@zone.js:829
ZoneAwarePromise.then@zone.js:918
PlatformRef.\u bootstrapModuleWithZone@core.es5.js:4537
PlatformRef_u.bootstrapModule@core.es5.js:4522
122@main.ts:11
__webpack_require_uu@bootstrap 7f61d62415a6f5810bca:52
290@main.bundle.js:663
__webpack_require_uu@bootstrap 7f61d62415a6f5810bca:52
webpackJsonpCallback@bootstrap 7f61d62415a6f5810bca:23
（匿名）@main.bundle.js:1
为什么？怎么了？我遗漏了什么？我该如何解决这个问题？

从
中删除HTML注释您不能将注释放在标记中…好的，如果您将注释放在回答中，我将接受…tnx从
中删除HTML注释您不能将注释放在标记中…好的，如果您将注释放在回答中，我将接受…tnx