無法在Angular2的父組件中使用子組件

Question

我想要使用主組件模板內的選擇器使用主組件內的子組件，app.component。但它不起作用。

child.component.ts

import { Component} from '@angular/core'; 
@Component({ 
selector: 'child-component', 
templateUrl: `<p>Child Component</p>` 
}) 
export class ChildComponent { } 

app.component.ts

import { Component } from '@angular/core'; 
import { ChildComponent} from './child.component'; 

@Component({ 
selector: 'my-app', 
template: `<h1>Hello Angular!</h1> 
<child-component> </child-component>  ` 
}) 

export class AppComponent { } 

我的確在模塊的聲明如下的ChildComponent

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { ChildComponent} from './child.component'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
imports: [BrowserModule], 
declarations: [AppComponent,ChildComponent], 
bootstrap: [AppComponent] 
}) 

export class AppModule { } 

在How to import component into another root component in Angular 2提到的解決方案不起作用。

請幫忙做決議。

Answer 1

您在child-component meta選項內有錯字。

templateUrl: `<p>Child Component</p>` 

應該

template: `<p>Child Component</p>`