Angular 2コンポーネント間でHTMLを共有する方法

Question

私はAngularを初めて使用していて問題を抱えています。

いくつかのHTML（レイアウト）を一部のコンポーネント間で共有したいが、すべてではない。

app.compomonent：

コンポーネントX

<div class="classB"> 
    <h2>{{Subtitle}}</h2> 
</div> 
<div class="classC"> 
    X_SPECIFIC_HTML 
</div> 

コンポーネントY

：

<div class="classA"> 
    <router-outlet></router-outlet> 
</div> 

私のコンポーネントの一部を、すべてではないが、いくつかのHTMLを共有します だから私のコンポーネントは次のように定義することができ

<div class="classB"> 
    <h2>{{Subtitle}}</h2> 
</div> 
<div class="classC"> 
    INSERT_COMPONENT_HTML_HERE 
</div> 

：

コンポーネントX

は、私が実際のコンポーネントのHTMLのプレースホルダーと共有HTML（データバインドに注意）を定義したいです

X_SPECIFIC_HTML 

コンポーネントY

Y_SPECIFIC_HTML 

現在の路線：

const appRoutes: Routes = [ 
    { path: 'x', component: XComponent }, 
    { path: 'y', component: YComponent } 
]; 

これは可能ですか？ガットが他の場所に役立つ

Answer 1

...

共有HTMLは、「コンテンツの投影」を使用して非常に簡単です。

データバインディングは少し面倒ですが、BehaviorSubjectを使用してデータバインドを管理しました。

ページlayout.component（共有HTML）

<div style="background-color: red;"> 
    <h2>subtitle: {{subtitle}}</h2> 
    <ng-content></ng-content> 
</div> 

import { Component, OnInit } from '@angular/core'; 
import { LayoutService } from '../../services/layout.service'; 
@Component({ 
    selector: 'page-layout', 
    templateUrl: './page-layout.component.html', 
    styleUrls: ['./page-layout.component.css'] 
}) 
export class PageLayoutComponent implements OnInit { 
    subtitle = ''; 
    constructor(private LayoutService: LayoutService) { 
    } 
    ngOnInit() { 
    this.LayoutService.observable.subscribe(x => { 
     if (console) { 
     console.log('PageLayoutComponent, subscribe: ' + JSON.stringify(x)); 
     } 
     this.subtitle = x.subtitle; 
    }); 
    } 
} 

アセンブリlist.component（共有HTMLを使用してコンポーネント）

<page-layout> 
    <p>ToDo</p> 
</page-layout> 

import { Component, OnInit } from '@angular/core'; 
import { LayoutService } from '../../services/layout.service'; 
@Component({ 
    selector: 'assembly-list', 
    templateUrl: './assembly-list.component.html', 
    styleUrls: ['./assembly-list.component.css'] 
}) 
export class AssemblyListComponent implements OnInit { 
    constructor(private LayoutService: LayoutService) { 
    } 
    ngOnInit() { 
    this.LayoutService.emitTitle('AssemblyListComponent1', 'AssemblyListComponent2'); 
    } 
} 

レイアウトサービス（共有HTMLのデータバインディング）

import { Component, Injectable } from '@angular/core'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
export interface ILayoutServiceData { 
    title: string; 
    subtitle: string; 
} 
@Injectable() 
export class LayoutService { 
    private behaviorSubject: BehaviorSubject<ILayoutServiceData> = new BehaviorSubject({title: null, subtitle: null}); 
    observable = this.behaviorSubject.asObservable(); 
    emitTitle(title: string, subtitle: string) { 
    if (console) { 
     console.log(`LayoutService.emitTitle(\'${title}\', \'${subtitle}\'`); 
    } 
    const data: ILayoutServiceData = { 
     title: title, 
     subtitle: subtitle 
    }; 
    this.behaviorSubject.next(data); 
    } 
}