在Angular 2中创建动态组件 [英] Create a Dynamic Component in Angular 2

问题描述

嘿，我是Angle 2的新手，我在过去一周玩过angular 2，想知道是否可以生成具有动态模板和动态样式的动态组件.这意味着关注应该是这样

Hey I am new to angular 2, I have played with angular 2 for the past week and wondered if it possible to generate a dynamic component with a dynamic template and dynamic styles. This means that the follwoing should be like this

@Component({
    // 2a
    selector: 'dynamic placeholder',

    // 2b
    styles: [`dynamic styles`] 

    // 2c
    template: `dynmic template`
})

是否有可能在角度2中做到这一点，我记得在角度1中可能做到这一点.

is it possible to do it in angular 2, I remember that such this is maybe possible in angular 1.

任何帮助将不胜感激(尤其是简单代码的插件)

Any Help will be appreciated(Escpecially plunkers with simple code)

这是我到目前为止所取得的成就:尝试使用ComponentFactoryResolver:

This is what I have achieved so far: try using ComponentFactoryResolver:

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
}

@Component({
    selector: 'my-app',
    template: `
        <div>Hello, world!</div>
    `
})
export class AppComponent {
}

@NgModule({
    declarations: [HomeComponent],
    exports: [HomeComponent]
})
export class HomeModule {
}

@Component({
    selector: 'home',
    template: `
        <div>This is home</div>
    `
})
export class HomeComponent {
}

@Component({
    selector: 'hello-world',
    template: `
        <div>
            Hello, world!, {{name}}
            The answer is: {{getAnswer()}}
        </div>
    `
})

export class HelloWorldComponent implements AfterViewInit {
    private name:string = 'You';

    constructor(private helloWorldService: HelloWorldService) {
    }

    ngAfterViewInit(): void {
        this.name = 'Me';
    }

    private getAnswer() {
        return this.helloWorldService.giveMeTheAnswer();
    }
}

@NgModule({
    declarations: [HomeComponent, HelloWorldComponent],
    providers: [HelloWorldService],
    exports: [HomeComponent]
})
export class HomeModule {
}

@Component({
    selector: 'home',
    template: `
        <button (click)="sayHello()">Say hello</button>
        <div>This is home</div>
    `
})

export class HomeComponent {
    constructor(private componentFactoryResolver: ComponentFactoryResolver,
                private viewContainerRef: ViewContainerRef) {
    }

    private sayHello() {
        const factory = this.componentFactoryResolver.resolveComponentFactory(HelloWorldComponent);
        const ref = this.viewContainerRef.createComponent(factory);
        ref.changeDetectorRef.detectChanges();
    }
}

这是一个可以创建动态组件的插件，我不知道是否可以创建动态css，如果有人可以回答我的问题，我会很高兴: http://plnkr.co/edit/ZXsIWykqKZi5r75VMtw2?p=preview

Here is a plunker which enables to created dynamic component, I don't know if creating dynamic css is possible,I would be pleased if some can I answer my question: http://plnkr.co/edit/ZXsIWykqKZi5r75VMtw2?p=preview

推荐答案

使用TypeScript和Angular2的最新版本(我相信该功能已在2.4.0中发布)，您可以创建1个基本组件，然后对其进行扩展.属性( @ Input/@ Output/@ ViewChild )上的所有修饰符/注释都将被复制.但是，您必须为每个祖先 @Component 属性指定属性，即您不能仅覆盖 selector ，而不能覆盖所有内容.那是正确的方法.

With TypeScript and latest version of Angular2 (I believe that feature has been released in 2.4.0) you can create 1 base component and then extend it. All decorators/annotations on properties (@Input/@Output/@ViewChild) will be copied. However, you must specify for each ancestor @Component properties, i.e. you cannot overwrite only selector, but everything. That is RIGHT approach.

另一种方法->使用 reflect-metadata 更新Component类上的装饰器(可能正是您要找的，因为这种情况下您可以一次覆盖1个属性)，但是要小心 export (即公开)要覆盖的组件内部使用的所有组件/指令/服务.例如，某些库具有多个组件，其中一些库只能在内部使用(即无法以正常方式将其导入到模块中……但是，您可以尝试 providers ).如果您尝试覆盖"，例如，带有 reflect-metadata 的CSS并使用内部组件-> angular/typescript将崩溃，因为它无法解析内部"内容.您可以从以下答案开始: StackOverflow

Another approach -> use reflect-metadata to update decorators on Component classes (probably that is what you are looking for, as it that case you can overwrite 1 property at time), but be careful to export (i.e. make public) all Components/Directives/Services that are used inside of Component that you want to overwrite. For example, some libraries have multiple Components, and some of them are supposed to be used only internally (i.e. there is no way to import it into your module in normal way... however, you can try providers). If you try to "overwrite", say, css with reflect-metadata and it uses internal components -> angular/typescript will crash, as it cannot resolve "internal" stuff. You can start with this answer: StackOverflow

这篇关于在Angular 2中创建动态组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！