Question

我正在进行Angular2-Meteor教程，并且大多数情况下没有更改内容，但遇到了index.html根文件在应用程序组件中呈现并双重呈现的问题。没有渲染任何Angular2组件。不知道发生了什么。

下面是渲染的html和支持它的主要代码。任何想法或帮助将不胜感激。

<html>
  <head>
    <link rel="stylesheet" type="text/css" class="__meteor-css__" href="/merged-stylesheets.css?hash=da39a3ee5e6b4b0d3255bfef95601890afd80709">
    <base href="/">
  </head>
  <body class=" hasGoogleVoiceExt">
    <app>
      <html>
        <head>
          <link class="__meteor-css__" href="/merged-stylesheets.css?hash=da39a3ee5e6b4b0d3255bfef95601890afd80709" rel="stylesheet" type="text/css">
          <base href="/">
        </head>
        <body>
          <app>Application Loading ...</app>
        </body>
      </html>
    </app>
    ... script files removed ...
  </body>
</html>

index.html（渲染前）：

<head>
  <base href="/">
</head>
<body>
  <app>Application Loading ...</app>
</body>

main.ts

import { bootstrap } from 'angular2-meteor-auto-bootstrap';
import { AppComponent } from './app.component';
import { DemoComponent } from './imports/demo/demo.component';
bootstrap(AppComponent, [DemoComponent])

app.component.ts

import { Component } from '@angular/core';
import { DemoComponent } from './imports/demo/demo.component';
@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  directives: [DemoComponent]
})
export class AppComponent {
  constructor() {
  }
}

demo.component.ts

import { Component } from '@angular/core';
import { MeteorComponent } from 'angular2-meteor';
import { DemoDataService } from './demo-data.service';
@Component({
  selector: 'demo',
  templateUrl: './demo.component.html',
  providers: [DemoDataService]
})
export class DemoComponent extends MeteorComponent {
  public greeting: string;
  constructor(private demoDataService: DemoDataService) {
    super();
    this.greeting = 'Hello Demo Component!';
  }
  public getData() {
    return this.demoDataService.getData();
  }
}

在应用程序组件内部呈现的Index.html和未呈现的组件

0 个答案: