Javascript 在Angular 2中创建动态零部件

嘿，我是angular 2的新手，在过去的一周里我一直在玩angular 2，我想知道是否有可能生成一个带有动态模板和动态样式的动态组件。这意味着接下来的事情应该是这样的

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

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

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

有没有可能在角度2中，我记得这在角度1中是可能的

任何帮助都将不胜感激（特别是带有简单代码的劫掠者）

这就是我到目前为止所取得的成果：尝试使用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();
    }
}

@NgModule({
导入：[BrowserModule]，
声明：[AppComponent]，
引导：[AppComponent]
})
导出类AppModule{
}
@组成部分({
选择器：“我的应用程序”，
模板：`
你好，世界！
`
})
导出类AppComponent{
}
@NGD模块({
声明：[HomeComponent]，
导出：[HomeComponent]
})
导出类HomeModule{
}
@组成部分({
选择器：“主页”，
模板：`
这是家
`
})
导出类HomeComponent{
}
@组成部分({
选择器：“你好，世界”，
模板：`
你好，世界！{name}
答案是：{{getAnswer（）}}
`
})
导出类HelloWorldComponent实现AfterViewInit{
私有名称：string='You'；
构造函数（私有helloWorldService:helloWorldService）{
}
ngAfterViewInit（）：void{
this.name='Me'；
}
私有getAnswer（）{
返回此.helloWorldService.giveMeTheAnswer（）；
}
}
@NGD模块({
声明：[HomeComponent，HelloWorldComponent]，
提供者：[HelloWorldService]，
导出：[HomeComponent]
})
导出类HomeModule{
}
@组成部分({
选择器：“主页”，
模板：`
打招呼
这是家
`
})
导出类HomeComponent{
构造函数（专用componentFactoryResolver:componentFactoryResolver，
私有viewContainerRef:viewContainerRef）{
}
二等兵sayHello（）{
常量工厂=this.componentFactoryResolver.resolveComponentFactory（HelloWorldComponent）；
const ref=this.viewContainerRef.createComponent（工厂）；
ref.changeDetectorRef.detectChanges（）；
}
}

这是一个可以创建动态组件的plunker，我不知道创建动态css是否可行，如果有人能回答我的问题，我会很高兴：

---

使用TypeScript和Angular2的最新版本（我相信该功能已在2.4.0中发布），您可以创建一个基本组件，然后对其进行扩展。将复制属性（

@Input/@Output/@ViewChild

）上的所有装饰器/注释。但是，您必须为每个祖先

@组件

属性指定，即您不能只覆盖

选择器

，而是覆盖所有内容。这是正确的做法

---

另一种方法->使用

反射元数据

来更新组件类上的装饰器（可能这就是您正在寻找的，因为在这种情况下，您可以一次覆盖一个属性），但要小心

导出

（即公开）要覆盖的组件内部使用的所有组件/指令/服务。例如，一些库有多个组件，其中一些组件应该只在内部使用（即，无法以正常方式将其导入模块…但是，您可以尝试

提供程序
）。如果你试图“覆盖”，比如说，带有
反射元数据的css，它使用内部组件->angular/typescript将崩溃，因为它无法解析“内部”内容。您可以从以下答案开始：
使用TypeScript和Angular2的最新版本（我相信该功能已在2.4.0中发布），您可以创建一个基本组件，然后对其进行扩展。将复制属性（
@Input/@Output/@ViewChild
）上的所有装饰器/注释。但是，您必须为每个祖先
@组件
属性指定，即您不能只覆盖
选择器
，而是覆盖所有内容。这是正确的做法

另一种方法->使用
反射元数据
来更新组件类上的装饰器（可能这就是您正在寻找的，因为在这种情况下，您可以一次覆盖一个属性），但要小心
导出
（即公开）要覆盖的组件内部使用的所有组件/指令/服务。例如，一些库有多个组件，其中一些组件应该只在内部使用（即，无法以正常方式将其导入模块…但是，您可以尝试
提供程序
）。如果你试图“覆盖”，比如说，带有
反射元数据的css，它使用内部组件->angular/typescript将崩溃，因为它无法解析“内部”内容。您可以从以下答案开始：
StackOverflow不是让人们为您编写代码的地方。告诉我们你尝试了什么，并做出了坚实的努力好的，我会上传它的权利的方式，代码甚至不工作，而不是试图关闭这个线程，为什么不互相帮助。我正在做一个坚实的努力，试图理解这个主题在angular 2中是否可行。如果不是，我就不会迁移到angular 2或使用它。我已经在互联网上传递了我的例子，但我的案例没有可靠的答案。StackOverflow不是一个让人们为你编写代码的地方。告诉我们你尝试了什么，并做出了坚实的努力好的，我会上传它的权利的方式，代码甚至不工作，而不是试图关闭这个线程，为什么不互相帮助。我正在做一个坚实的努力，试图理解这个主题在angular 2中是否可行。如果不是，我就不会迁移到angular 2或使用它。我已经在互联网上传递了我的示例，但我的案例没有可靠的答案。感谢tim提供的快速答案，但在我看来，根据随附的答案，reflect metdata用于继承，而不是创建动态组件。我正确地理解了您的解释，但我正在寻找一个示例，让我清楚如何使用suc