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页链接。