Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <razor>
- <mvc-partial>
- <dynamic-html> // buttonPress(){console.log("Function called in dynamicHtml)
- // Output() to call function in razor.ts
- </dynamic-html>
- </mvc-partial>
- <razor>
- import {
- Component,
- Directive,
- NgModule,
- Input,
- Output,
- EventEmitter,
- ViewContainerRef,
- Compiler,
- ComponentFactory,
- ModuleWithComponentFactories,
- ComponentRef,
- ReflectiveInjector, OnInit, OnDestroy, ViewChild
- } from '@angular/core';
- import { RouterModule } from '@angular/router';
- import { CommonModule } from '@angular/common';
- import { Http } from "@angular/http";
- import 'rxjs/add/operator/map';
- export function createComponentFactory(compiler: Compiler, metadata: Component): Promise<ComponentFactory<any> | undefined>{
- console.log(compiler)
- console.log(metadata)
- class DynamicComponent {
- @Output() buttonType: EventEmitter<string> = new EventEmitter<string>()
- // button click operation
- buttonPress() {
- this.buttonType.emit();
- }
- };
- const decoratedCmp = Component(metadata)(DynamicComponent);
- @NgModule({ imports: [CommonModule, RouterModule], declarations: [decoratedCmp] })
- class DynamicHtmlModule { }
- return compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule)
- .then((moduleWithComponentFactory: ModuleWithComponentFactories<any>) => {
- console.log(decoratedCmp)
- console.log(moduleWithComponentFactory.componentFactories.find(x => x.componentType === decoratedCmp))
- return moduleWithComponentFactory.componentFactories.find(x => x.componentType === decoratedCmp);
- });
- }
- @Component({
- selector: 'mvc-partial',
- template: `<div #dynamicHtml></div>`
- })
- //@Directive({ selector: 'mvc-partial' })
- export class RenderingViewDynamic implements OnInit {
- @ViewChild('dynamicHtml', { read: ViewContainerRef }) target: ViewContainerRef;
- html: string = '<p></p>';
- @Input() url: string;
- cmpRef: ComponentRef<any>;
- constructor(private vcRef: ViewContainerRef, private compiler: Compiler, private http: Http) { }
- clicks() {
- console.log("HI")
- }
- ngOnInit() {
- this.http.get(this.url)
- .map(res => res.text())
- .subscribe(
- (html) => {
- this.html = html;
- if (!html) return;
- if (this.cmpRef) {
- this.cmpRef.destroy();
- }
- const compMetadata = new Component({
- selector: 'dynamic-html',
- template: this.html,
- });
- createComponentFactory(this.compiler,compMetadata)
- .then(factory => {
- //const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
- this.cmpRef = this.target.createComponent(factory!);
- });
- },
- err => console.log(err),
- () => console.log('MvcPartial complete')
- );
- }
- ngOnDestroy() {
- if (this.cmpRef) {
- this.cmpRef.destroy();
- }
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement