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) => { },
                () => {}
            );      
    }
}

Angular的NgComponentOutlet文档显示,您可以将可插入节点的可选列表作为目标插入到内容(ng-content)占位符中.我按照Angular的文档中的示例进行操作,并且能够将文本节点注入到ng-content我的父组件中的不同占位符中,并且它适用于我的小/中/大父组件.

如何从我的路线中获取内容以注入这些不同的占位符？看起来我真的很接近让这个工作.我可以将静态内容注入到掌上电脑中,但我无法弄清楚如何将路由生成的内容注入占位符.

更新 - 07/25/2017

我创建了这个用于演示这种情况的插件(https://plnkr.co/edit/hOwRX1Ml6gX0S8em6nd5?p=preview).

在plunker中,page-wrapper组件使用ngComponentOutlet根据设备宽度加载小/中/大组件.page-wrapper组件将静态内容注入每个小/中/大组件的占位符,而不是从第1页注入路由内容.

我的目标是有一个页面包装器组件来处理响应式需求,例如用于小型/中型/大型响应式设计的不同导航元件.

那么,如何将"静态"内容注入到动态加载的组件的ng-content占位符中,而路由生成的内容是不是被注入到ng-content占位符中？

谢谢你的帮助.

Answer 1

1)您可以ng-content在PageWrapperComponent中定义位置并将它们转换为动态组件

页面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示例

2)您还可以在父组件中使用模板引用变量(或自定义指令)@ContentChild,PageWrapperComponent以获取转义部分.

页面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示例