Angular 组件不呈现 html，显示 html 路由答案

【问题标题】：Angular component doesn't render html, shows html routeAngular 组件不呈现 html，显示 html 路由
【发布时间】：2018-08-03 16:56:15
【问题描述】：

我为 Angular 创建了一个新组件，但我看不到呈现的 html。而不是呈现的 html，我得到了 html 的路由。

这些是我的文件夹结构：

这是我创建的名为server.component.ts的组件：

import { Component } from '@angular/core';

@Component({
    selector: 'app-server',
    template: './server.component.html'
})
export class ServerComponent {

}

这是组件的html，server.component.html：

<p>Este es mi nuevo componente!!!</p>

在 app.component.html 中包含我的组件标签：

<div>
    <input type = "text" [(ngModel)] = "message" />
    <p>{{message}}</p>
    <hr>
    *<app-server></app-server>*
</div>

这是我的 app.module.ts 代码，我在其中导入 ServerComponent 以供以后使用：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';


import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';

@NgModule({
  declarations: [
    AppComponent,
    ServerComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
   ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我在浏览器中得到的结果：

我做错了什么？

【问题讨论】：

标签： angular components

【解决方案1】：

在 server.component.ts 中，您使用了模板属性，该属性要求您在之间传递模板。如果要将链接传递给模板，则需要使用 templateUrl 属性。

【讨论】：

【解决方案2】：

在你的组件定义中用templateUrl替换template，它应该是

@Component({
    selector: 'app-server',
    templateUrl: './server.component.html'
})

【讨论】：