Question

通过一堆帖子来看，看起来有相当多的人有这个或那个问题。但我没有看到答案。所以我要转发，希望有一些新的眼睛接受它。

问题 - 如何在点击某些内容时将组件加载到div中。我的具体情况 - 我有一个“子导航”，上面有十几个表格，我想避免为这些表格中的每一个制作路线，我还想避免将所有12个表格加载到“隐藏”状态（如一个人使用标签）。我想我希望只有当用户从列表中选择一个新组件才能延迟加载到“主内容”div中。

我修改了一个plunker（来自https://plnkr.co/edit/HMXV6WM4jd8yZiOq9rJR?p=preview），因此它代表3个表单组件，一个子nav组件，以及主页面（其形成类似于domain / forms /的东西）。这样，一旦用户到达这里，他们就可以选择一个表格并将其显示在这里

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

存在2个问题 1）put.MyHtml（）函数不知道this.target，因此没有任何变化 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 {}

Angular 5将一个组件加载到div中

0 个答案: