Angular 4 |通过innerHTML绑定模板，无法访问组件变量（本例为damContentRoot）

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

   @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>`;

   }
}

@组件({
选择器：“应用程序计划”，
模板：“”
})
导出类平面组件{
公共页面模板：字符串；
公共目录根：字符串；
public ngOnInit（）：void{
this.damContentRoot=“abcde”；
this.pageTemplate=`Goog
`;
}
}

---

damContentRoot不会得到更新。尝试使用动态组件，但damContentRoot变为该组件的范围外变量。

pageTemplate

是一个字符串，但您将其视为模板中的布尔值，如果要如上所述使用它，则应将其转换为bollean值

或者在ngIf中检查相应的值

template: '<div *ngIf="pageTemplate === 'yourStringvalue'" [innerHTML]="pageTemplate | safeHtml"></div>'

模板：“”

pageTemplate

是一个字符串，但您将其视为模板中的布尔值，如果您希望如上所述使用它，则应将其转换为布尔值

或者在ngIf中检查相应的值

template: '<div *ngIf="pageTemplate === 'yourStringvalue'" [innerHTML]="pageTemplate | safeHtml"></div>'

模板：“”

您可以创建自己的指令来执行此操作：

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;
                }
            }

@指令({
选择器：“[compile]”
})
导出类CompileDirective实现OnChanges{
@Input（）编译：字符串；
@Input（）compileContext：任意；
compRef:ComponentRef
您可以创建自己的指令：

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;
                }
            }

@指令({
选择器：“[compile]”
})
导出类CompileDirective实现OnChanges{
@Input（）编译：字符串；
@Input（）compileContext：任意；
compRef:ComponentRef
damContentRoot未在innerHTML中绑定。尽管它是组件公共变量。damContentRoot未在innerHTML中绑定。尽管它是组件公共变量。这在本地上可以正常工作，但在prod build中失败。显示错误：未加载运行时编译器要在angular 6中使用它，需要生成如果没有aot和构建优化器：
ng build--prod--aot=false--build optimizer=false
这会使main.js文件更大，因此它不是一个长期的解决方案。在我的例子中，我的main.js是556k，有一个正常的
--prod
构建，有1.2MB的
--aot=false--build optimizer=false
。这在本地运行良好，但在prod上失败build.Says Error:Runtime compiler未加载要在angular 6中使用它，您需要在不使用aot和构建优化器的情况下构建：
ng build--prod--aot=false--build optimizer=false
这会使main.js文件更大，因此它不是一个长期解决方案。在我的例子中，我的main.js是556k，带有一个普通的
--prod
构建，而带有1.2MB的<代码>--aot=false--build optimizer=false
。