在Angular 2中嵌入組件

我嘗試了幾種不同的方法，但是我可以找到的所有示例都使用模板而不是templateUrl來嵌入組件。在Angular 2中嵌入組件

在覈心部分，我有一個頭部組件，我想分開它，因爲它具有登錄功能，並根據您是否登錄顯示不同的信息。我沒有把它放到應用程序組件中，而是想將它分解成它自己的組件。基本上就是現在發生的事情是它建立發現，但不走過去的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 { }

來源

2016-12-29 Jhorra

是否已將您的HeaderComponent添加到您的應用程序聲明中？ – Milad

你的控制檯應該有一些錯誤 – Milad

@Milad這是奇怪的事情，我沒有錯誤。 – Jhorra

你的頭組件選擇是app-header但你在HTML中使用它作爲<header-componet></header-component>。

HTML標籤名稱應該始終與selector名稱相同。在您的app.component.html中，更改爲

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

來源

2016-12-29 00:23:50 Chybie

就是這樣。我認爲這是一個像這樣的語法問題。非常感謝，我應該知道這一點。 – Jhorra

在Angular 2中嵌入組件

回答

相關問題