在 Angular 2 中嵌入组件答案

【问题标题】：Embed component in Angular 2在 Angular 2 中嵌入组件
【发布时间】：2016-12-29 00:01:54
【问题描述】：

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

在核心我有一个我想要单独的标题组件，因为它具有登录功能，并根据您是否登录显示不同的信息。我认为与其将其放入应用程序组件中，不如将其分解为自己的组件。基本上现在发生的事情是它构建了 find，但没有超过 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 { }

【问题讨论】：

是否已将 HeaderComponent 添加到您的应用声明中？
你的控制台应该有一些错误
@Milad 这很奇怪，我没有收到任何错误。
@Milad 我已更新问题以包含 app.module.ts
我怀疑这与标题组件或 AppModule 中的模板 url 有关。您能否也发布您的HeaderComponent 代码？此外，请确保 HeaderComponent 在您的应用模块 > 声明部分中。

标签： javascript angular typescript angular2-components

【解决方案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>

【讨论】：

就是这样。我认为这是一个这样的语法问题。非常感谢，我应该知道的。