別のコンポーネントを角度2のアプリケーションに追加する

Question

ここでは、単純な角度のアプリケーションを作成しようとしています。私はappコンポーネントよりもtutorialcomponentという名前のコンポーネントをもう1つ作成しました。今、tutorialComponentのセレクタを使用して、私はそれをアプリケーションコンポーネントに埋め込もうとしています。しかし、私は埋め込んだ後、アプリケーションコンポーネントの出力を取得していません。

がそう私にコンポーネントをバインドする方法を提案してください、

import { Component } from '@angular/core'; 
import {TutorialComponent} from './tutorial/tutorial.component'; 

@Component({ 
    selector: 'app-root', 
    template: `./app.component.html 
     <app-tutorial></app-tutorial>`, 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'My Angular2 Login App'; 
} 

ここtutorialcomponentあり、ここで

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

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


} 

私の出力は次のとおりです。 はここに私のアプリのコンポーネントです。

Answer 1

は、私が期待通りにアプリのコンポーネントが動作していると思います。この

@Component({ 
    selector: 'app-root', 
    template: `{{title}}<br><app-tutorial></app-tutorial>`, //this line 
    styleUrls: ['./app.component.css'] 
}) 

を試してみてください。あなたはメッセージを見ることができないのでtitleを束縛していません。

Answer 2

それとも、htmlファイルを持っていることを好む場合は、この試すことができます：

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

のPUI DANSルfichier HTML TU remets CECI：

<span>{{title}}</span> 
<br> 
<app-tutorial></app-tutorial> 

Answer 3

この

import { Component } from '@angular/core'; 
import { TutorialComponent } from './tutorial/tutorial.component'; 

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

export class AppComponent { 
    public title = 'My Angular2 Login App'; //define as public 
}