テンプレート2内のtemplateUrlの使用

Question

私はちょうどAngular2を学び始めて、2つのコンポーネントを組み合わせる必要があります。ここで

は私app.component.ts

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

    @Component({ 
    selector: 'app-root', 
    template: './app.component.html <app-home></app-home>', 
    styleUrls: ['./app.component.css'] 
    }) 
    export class AppComponent { 
     mylogo = 'ABC Engineering'; 
     headlist = ["Home", "About", "Portfolio", "Pricing", "Contact"]; 
     technology = ["HTML", "CSS", "JavaScript", "jQuery", "AngularJS", "PHP"]; 
    } 

だ。ここの画像に示すように、それは、出力を与える私の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 { AppComponent } from './app.component'; 
import { HomeComponent } from './home/home.component'; 
import { AboutComponent } from './about/about.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HomeComponent, 
    AboutComponent, 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 

    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

です。

app.component.htmlの出力が表示されません。しかし、それは 'home.component.html'からのコンテンツを表示します。 「app.component.html」のコンテンツを表示するにはどうすればよいですか？

あなたはどちらか

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

または

@Component({ 
    selector: 'app-root', 
    template: '<app-home></app-home>', 
    styleUrls: ['./app.component.css'] 
    }) 

ではなく、単一のコンポーネント内の両方を組み合わせたり、ミックスを使用することができます

Answer 1

。