Question

经验丰富的Angular 1开发人员试图学习Angular 2.我有一个行为奇怪的准系统应用程序。我正在使用MeteorJS来提供一切。这是应用程序结构 -

client/
    components/
        articles/
            articles.component.html
            articles.component.ts
    index.html
    app.html
    app.ts

index.html -

<template>
  <app></app>
</template>

app.html -

<template>
  <nav>
    <ul>
      <li>
        <a [routerLink]="['Articles']">Articles</a>
      </li>
      <li>Nav 2</li>
      <li>Nav 3</li>
      <li>Nav 4</li>
    </ul>
  </nav>
  <section>
    <router-outlet></router-outlet>
  </section>
</template>

app.ts -

import {Component, View} from 'angular2/core';
import {bootstrap} from 'angular2-meteor';

module WSN.App {

  @Component({
    selector: 'app',
    templateUrl: 'app.html'
  })

  export class AppComponent {

  }

  bootstrap(AppComponent);
}

除非要求，否则我不会显示文章文件。我得到的是这个html -

<body>
  <app>
    <html>
      <head>
      </head>
      <body>
        <app></app>
      </body>
    </html>
  </app>
</body>

将templateUrl更改为template会遇到同样的问题。任何人都有任何想法为什么app.html没有加载？为什么HTML加倍？控制台中没有错误。

编辑：

将AppComponent构造函数更新为 -

export class AppComponent {
    constructor() {
      alert('x');
    }
  }

我正在看警报。

Answer 1

所以问题是我没有引用来自Web根目录的路径。

@Component({
    selector: 'app',
    templateUrl: 'app.html'
  })

应该是 -

@Component({
    selector: 'app',
    templateUrl: 'client/app.html'
  })

我希望抛出一些错误。另外，为什么要打印两次？

为什么我的应用程序组件呈现应用程序组件？

1 个答案: