각 2 개의 다중 구성 요소

Question

각도 2 개념과 완전히 혼동하는 것처럼 보였습니다. 나는 (이 진입 점해야입니다) app.component.html에 이런 식으로 정의 된 페이지의 세 가지 구성 요소를 가지고 싶습니다

<bp-header></bp-header> 
<bp-home></bp-home> 
<bp-footer></bp-footer> 

을 그리고이 주요 구성 요소입니다 (app.component.ts) :

import { Component }   from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import {HeaderComponent} from "./header.component" 
import {FooterComponent} from "./footer.component" 
import {HomeComponent} from "./home.component" 
@Component({ 
    selector: 'bp-app', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app/app.component.css'], 
    directives: [HeaderComponent, FooterComponent, HomeComponent] 
}) 
export class AppComponent {} 

부 콘솔에서 오류없이 홈페이지를 열 때 아무 것도 없습니다.

Answer 1

글쎄, 최종 해결책은 bp-header와 bp-footer가 별도의 구성 요소라는 방식으로 템플릿 안에 머리말과 꼬리말 지시어를 넣는 것입니다.

import { Component }   from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import {HeaderComponent} from "./header.component" 
import {FooterComponent} from "./footer.component" 
import {HomeComponent} from "./home.component" 
@Component({ 
    selector: 'bp-app', 
    templat: '<bp-header></bp-header><bp-footer></bp-footer>', 
    styleUrls: ['app/app.component.css'], 
    directives: [HeaderComponent, FooterComponent, HomeComponent] 
}) 
export class AppComponent {}