Angular 2 (Typescript) - 구성 요소 및 동적 주입의 원격 개발

Question

확장 가능하고 사용자 정의가 가능한 구성 가능 관리 콘솔의 핵심 기술로 Angular 2를 평가하고 있습니다. 외부 개발자가 자신의 구성 요소를 개발하여 내 "읽기 전용"프레임 워크 내에서 어떤 방식 으로든 삽입 할 수 있어야합니다. 읽기 전용은 개발자가 프레임 워크의 소스 코드에 액세스 (또는 편집) 할 수 없음을 의미합니다. 대신 그들은 "마스터"앱의 구조를 알지 못하고 서블릿 (또는 다른 것들)을 통해 정적으로 서비스하지 않고 컴포넌트 자원 (.html, .ts/.js 파일)의 개발에만 집중할 수 있습니다. 적어도 이론적으로 가능한가? 사전 정의 된 위치에서 동적으로 가져 오는 "주"앱 모듈에서 타이프 스크립트 기반 구성 요소를 선언하고 이해하도록 할 수 있습니까?

Answer 1

네 - 여기 참조 : 나는 Plunkr 홈페이지에서 찾고 무작위로하면서이 예를 통해 발견 https://plnkr.co/edit/fdP9Oc?p=info

.

구성 요소를 개체 매개 변수로 컴파일 할 함수에 전달할 수 있습니다.

import {Compiler, Component, NgModule, OnInit, ViewChild, 
    ViewContainerRef} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: `<h1>Dynamic template:</h1> 
      <div #container></div>` 
}) 
export class App implements OnInit { 
    @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef; 

    constructor(private compiler: Compiler) {} 

    ngOnInit() { 
    this.addComponent(
     `<h4 (click)="increaseCounter()"> 
     Click to increase: {{counter}} 
     </h4>`, 
     { 
     counter: 1, 
     increaseCounter: function() { 
      this.counter++; 
     } 
     } 
    ); 
    } 

    private addComponent(template: string, properties?: any = {}) { 
    @Component({template}) 
    class TemplateComponent {} 

    @NgModule({declarations: [TemplateComponent]}) 
    class TemplateModule {} 

    const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule); 
    const factory = mod.componentFactories.find((comp) => 
     comp.componentType === TemplateComponent 
    ); 
    const component = this.container.createComponent(factory); 
    Object.assign(component.instance, properties); 
    // If properties are changed at a later stage, the change detection 
    // may need to be triggered manually: 
    // component.changeDetectorRef.detectChanges(); 
    } 
} 

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