角度4 |通过innerHTML进行模板绑定，无法访问组件变量(在这种情况下为damContentRoot) [英] Angular 4 | Template bind through innerHTML, component variables are not accessible (damContentRoot is this case)

问题描述

我们必须从API绑定模板，然后将damContentRoot声明为组件中的公共变量.但这并没有得到体现.

We have to bind the template from API and then damContentRoot declared as the public variable in component. But it is not getting reflected.

   @Component({
    selector: 'app-plans',
    template: '<div *ngIf="pageTemplate" [innerHTML]="pageTemplate | safeHtml"></div>'
})
export class PlansComponent {
   public pageTemplate: string;
   public damContentRoot: string;
   public ngOnInit(): void {
   this.damContentRoot = "abcde";
   this.pageTemplate = `<div>Goog <span [innerHtml]="damContentRoot"></span>
                <span [innerHtml]="'<p>Yahoo</p>'"></span></div>`;

   }
}

damContentRoot无法更新.尝试使用动态组件，但damContentRoot超出了该组件的范围变量.

damContentRoot do not get updated. Tried dynamic component but then damContentRoot become out of scope variable for that component.

推荐答案

您可以创建自己的指令来实现:

You can create your own directive that will do it:

compile.directive.ts

              @Directive({
                selector: '[compile]'
            })
                export class CompileDirective implements OnChanges {
            @Input() compile: string;
              @Input() compileContext: any;

                compRef: ComponentRef<any>;

                constructor(private vcRef: ViewContainerRef, private compiler: Compiler) {}

                ngOnChanges() {
                    if(!this.compile) {
                        if(this.compRef) {
                            this.updateProperties();
                            return;
                        }
                        throw Error('You forgot to provide template');
                    }

                    this.vcRef.clear();
                    this.compRef = null;

                    const component = this.createDynamicComponent(this.compile);
                    const module = this.createDynamicModule(component);
                    this.compiler.compileModuleAndAllComponentsAsync(module)
                        .then((moduleWithFactories: ModuleWithComponentFactories<any>) => {
                            let compFactory = moduleWithFactories.componentFactories.find(x => x.componentType === component);

                            this.compRef = this.vcRef.createComponent(compFactory);
                            this.updateProperties();
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }

                updateProperties() {
                    for(var prop in this.compileContext) {
                        this.compRef.instance[prop] = this.compileContext[prop];
                    }
                }

                private createDynamicComponent (template:string) {
                @Component({
                        selector: 'custom-dynamic-component',
                        template: template,
                    })
                    class CustomDynamicComponent {}
                    return CustomDynamicComponent;
                }

                private createDynamicModule (component: Type<any>) {
                @NgModule({
                        // You might need other modules, providers, etc...
                        // Note that whatever components you want to be able
                        // to render dynamically must be known to this module
                        imports: [CommonModule],
                        declarations: [component]
                    })
                    class DynamicModule {}
                    return DynamicModule;
                }
            }

用法:-

            import { Component, Input, NgModule } from '@angular/core'
            import { BrowserModule } from '@angular/platform-browser'

            import { CompileDirective } from './compile.directive';

            @Component({
                selector: 'my-app',
                template: `
            <div class="product"><ng-container *compile="template1; context: this"></ng-container></div>
            `,
            })
            export class App {
                damContentRoot = "abcde";
              @Input() template1: string = `<div>Goog <span [innerHtml]="damContentRoot"></span><span [innerHtml]="'<p>Yahoo</p>'"></span></div>`;
            }

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

柱塞

这篇关于角度4 |通过innerHTML进行模板绑定，无法访问组件变量(在这种情况下为damContentRoot)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！