Angular 4 ngComponentOutlet加載動態組件，但路由內容未呈現

Question

我試圖加載不同的「父」組件，並通過在每個父組件中定位ng-content將路由內容注入到這些不同的父組件中。基本上，每個父組件處理基於設備寬度（小/移動，中/平板和大/桌面）的導航和其他樣板材料。

在我的應用程序中爲每條路徑生成的內容需要被轉移（注入）到父組件中。每條路線的內容均使用ng-content針對特定注射點。我可以使用<ng-container *ngComponentOutlet="ResponsiveComponent;"></ng-container>換出父組件。問題是我的路由生成的內容沒有被注入到每個父組件的目標位置ng-content。

這是用於交換父組件的代碼。 AppPageComponent延伸ResponsiveComponent，它基於媒體查詢監視設備寬度。

@Component({ 
    selector: 'app-page', 
    template: ` 
     <ng-container *ngComponentOutlet="ResponsivePageComponent;"></ng-container>  
    `, 
    styleUrls: [ './page.component.scss'], 
    providers: [] 
}) 
export class AppPageComponent extends ResponsiveComponent implements OnInit, OnDestroy 
{ 
    ResponsivePageComponent; 

    constructor(
     injector: Injector, 
     zone: NgZone) 
    { 
     super(zone);  
    } 

    ngOnInit() 
    {  
     this.IsSmallEnvironmentStream 
      .subscribe 
      (
       (isSmall: boolean) => 
       { 
        if (isSmall) 
        { 
         this.ResponsivePageComponent= AppPageSmallComponent; 
        }     
       }, 
       (err) => { }, 
       () => {} 
      ); 

     this.IsMediumEnvironmentStream 
      .subscribe 
      (
       (isMedium: boolean) => 
       { 
        if (isMedium) 
        { 
         this.ResponsivePageComponent = AppPageMediumComponent; 
        }     
       }, 
       (err) => { }, 
       () => {} 
      ); 

     this.IsLargeEnvironmentStream 
      .subscribe 
      (
       (isLarge: boolean) => 
       { 
        if (isLarge) 
        { 
         this.ResponsivePageComponent = AppPageLargeComponent; 
        }     
       }, 
       (err) => { }, 
       () => {} 
      );  
    } 
} 

角度對NgComponentOutlet文檔顯示可以針對可投影節點的可選列表插入內容（NG-內容）佔位符。我遵循了Angular的文檔中的例子，並且能夠將文本節點注入到我父組件中的不同ng-content佔位符中，並且它適用於我的小/中/大父組件。

如何從我的路線獲取內容以注入這些不同的佔位符？看起來我真的很接近這個工作。我可以將靜態內容注入到參與者中，但我無法弄清楚如何將路由生成的內容注入佔位符。

更新 - 2017年7月25日

我創造了這個plunker demonstrating this scenario（https://plnkr.co/edit/hOwRX1Ml6gX0S8em6nd5?p=preview）。

在重載程序中，page-wrapper組件使用ngComponentOutlet根據設備寬度加載小/中/大組件。頁面包裝器組件將靜態內容注入到每個小/中/大組件的佔位符中，而不是從第1頁注入路由內容。

我的目標是擁有一個頁面包裝器組件來處理響應式需求，如不同的導航元素小/中/大型響應式設計。

那麼，怎樣才能「靜態」的內容被注入到動態加載組件的ng-content佔位但路線生成的內容不被注入ng-content佔位符？

感謝您的幫助。

Answer 1

1）您可以在PageWrapperComponent定義ng-content的地方，他們transclude動態組件

頁面wrapper.component.html

<ng-container *ngComponentOutlet="ResponsiveComponent; 
           content: [[el1],[el2]]"></ng-container> 
<div #el1> 
    <ng-content></ng-content> 
</div> 
<div #el2> 
    <ng-content select="[named-injection-point]"></ng-content> 
</div> 

Plunker Example

2）你也可以在父組件中使用模板引用變量（或自定義指令），並在中使用得到transcluding部分。

頁面one.component.html

<page-wrapper> 
    <section #mainPoint> 
     <h2>Page One</h2> 
    </section> 
    <section #namedPoint> 
     <h3>Page One Content:</h3> 
     <p>Lorem ipsum dolor.</p> 
    </section> 
</page-wrapper> 

頁面wrapper.component.ts

@ContentChild('mainPoint') mainPoint; 
@ContentChild('namedPoint') namedPoint; 

頁面wrapper.component.html

<ng-container *ngComponentOutlet="ResponsiveComponent; 
     content: [[mainPoint.nativeElement],[namedPoint.nativeElement]]"></ng-container> 

Plunker Example

Answer 2

這是你所期待的嗎？我只測試了中型組件BTW ...

https://plnkr.co/edit/JgCQb4JVSHnHCueamerV?p=preview

我想這是因爲你試圖用NG-內容設置在不直接從具有內容的組件調用的組件你想注入。我所做的只是在PageWrapperComponent上添加一個ng-content，並使用它自己的選擇器，然後將它傳遞給下一個組件，並使用期望的選擇器。

PageWrapperComponent ...

<ng-content select="[injected-content]" named-injection-point></ng-content> 

然後在PageOneComponent使用了新的選擇包裝期待

<section injected-content> 
    <h3>Page One Content:</h3> 
    <p>Lorem ipsum ...</p> 
</section>  

現在我可以看到頁面下吉米和弗雷德一個內容，當我點擊第1頁鏈接。