角5加载组件放入一个div(Angular 5 loading a component into a

认真细致地翻着一堆帖子，它看起来像人相当数量都有这样的疑问，在一个或另一个。但我没有看到一个答案。所以我要重新发布，在一些新的眼睛得到它的希望。

现在的问题 - 如何被点击的东西时，一个组件加载到一个div。我的具体情况 - 我有“子导航”，上面有十几个的形式，我希望避免对每一种形式的路线，我也想避免加载在一个“隐藏”状态的所有12个表格（如一个不使用标签）。我想我要一个新的组件偷懒加载到格设置只有当用户从列表中选择它的“主要内容”。

我已修改一个plunker（从https://plnkr.co/edit/HMXV6WM4jd8yZiOq9rJR?p=preview ），所以它代表了3层形式的组件，和一个子组件的资产净值和主页（其卷绕是类似域/表格/）。这样，一旦用户来到这里，他们可以挑选一种形式，它已经出现在这里会是什么

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

2层存在的问题1）this.target是不知道的putInMyHtml（）函数，所以没什么变化2）它是只能用“TestPage”传递工作，我不知道如何通过一个动态无功。

希望这是有道理的。

//our root app component
import {Component, NgModule, ViewChild, ViewContainerRef, ComponentFactoryResolver} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

import { DynamicModule } from './dynamic.module';


// mock form components ---------------------
@Component({
    template: '<b>Form 1</b>',
})
export class TestPage {}

@Component({
    template: '<b>Form 2</b>',
})
export class TestPage2 {}

@Component({
    template: '<b>Form 3</b>',
})
export class TestPage3 {}


// sub nav page ---------------------
@Component({
    selector: 'sub-Nav',
    template: `
        <a (click)="putInMyHtml(1)">Insert component</a> |
        <a (click)="putInMyHtml(2)">Insert component</a> |
        <a (click)="putInMyHtml(3)">Insert component</a> |
        <p>Some instructions</p>
    `    
})
export class SubNav {

    @ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef;
    constructor(private cfr: ComponentFactoryResolver) {}

    putInMyHtml(n) {
        this.target.clear();
        let compFactory = this.cfr.resolveComponentFactory(TestPage);
        this.target.createComponent(compFactory);
    }

}

// main page ---------------------
@Component({
    selector: 'my-app',
    template: `
        <sub-Nav></sub-Nav>
        <div>
             <template #target></template> 
        </div>
    `
})
export class MainPage {}


@NgModule({
    imports: [ 
        BrowserModule, 
        DynamicModule.withComponents([TestPage]) 
    ],
    declarations: [ 
        MainPage, 
        TestPage,
        TestPage2,
        TestPage3, 
        SubNav 
    ],
    bootstrap: [ MainPage ]
})
export class AppModule {}