3

私は 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();
  }
}
4

0 に答える 0