在 Angular 2 中创建动态组件

Question

嘿，我是 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();
    }
}

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

Answer 1

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

另一种方法 -> 使用 reflect-metadata 更新组件类上的装饰器（可能这就是您要寻找的，因为这种情况下您可以一次覆盖 1 个属性），但要小心 export（即public）在您想要覆盖的组件内部使用的所有组件/指令/服务。例如，一些库有多个组件，其中一些应该只在内部使用（即无法以正常方式将其导入模块......但是，您可以尝试providers）。如果您尝试“覆盖”，例如，使用 reflect-metadata 的 css 并且它使用内部组件 - > angular/typescript 会崩溃，因为它无法解析“内部”的东西。你可以从这个答案开始：StackOverflow