Question

我尝试了几种不同的方法，但我能找到的所有示例都使用模板而不是templateUrl来嵌入组件。

核心我有一个我想要分开的标题组件，因为它具有登录功能，并根据您是否已登录显示不同的信息。我没想把它放到app组件中，而是把它分解成自己的组件会更好。基本上现在发生的是它构建查找，但没有超越Loading...

即使它没有错误，我也不知道如何处理<header-component></header-component

我为此尝试了几种不同的语法选项，但所有结果都是相同的。我觉得我所遗漏的是以某种方式传入导入的组件。我只是不确定如何。

app.component.ts

import { Component } from '@angular/core';
import { Router } from "@angular/router";

import { HeaderComponent } from './header/Header.Component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

}

app.component.html

<div id="header">Header</div> /*temporary place holder */
<header-component></header-component>
<router-outlet></router-outlet>

header.component.html（目前尚未完成。完成后将保留登录功能）

<ul id="links">
    <li>
        <a href="/">Home</a>
    </li>
    <li>
        <a href="/census">Census</a>
    </li>
</ul>

header.component.ts

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


@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {


  constructor() { }

  ngOnInit() {
  }



}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routing } from "./app.routing";

import { AppComponent } from './app.component';
import { EncounterComponent } from './encounter/encounter.component';
import { CensusComponent } from './census/census.component';
import { PracticeComponent } from './practice/practice.component';
import { LocationComponent } from './location/location.component';
import { CensusManagementComponent } from './census-management/census-management.component';
import { LoginComponent } from './login/login.component';
import { UserComponent } from './user/user.component';
import { HomeComponent } from './home/home.component';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [
    AppComponent,
    EncounterComponent,
    CensusComponent,
    PracticeComponent,
    LocationComponent,
    CensusManagementComponent,
    LoginComponent,
    UserComponent,
    HomeComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

您的标题组件选择器为app-header，但您在HTML中将其用作<header-componet></header-component>。

HTML标记名称应始终与selector名称相同。在app.component.html中，更改为

<div id="header">Header</div> /*temporary place holder */
<app-header></app-header>

在Angular 2

1 个答案: