为什么我的应用组件呈现应用组件

Why Does My App Component Render an App Component?

本文关键字：组件 应用 我的 为什么      更新时间：2023-09-26

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

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

索引.html -

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

应用程序.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>

应用程序 -

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会翻倍？控制台中没有错误。

编辑：

已将应用组件构造函数更新为 -

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

我看到了警报。

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

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

应该是——

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

我希望抛出一些错误。另外，为什么它会将所有内容打印两次？

相关文章：