相关疑难解决方法(0)

我正在写一个Angular应用程序,{{myVal}}我想要显示一个响应.

我怎么做？如果我只是使用绑定语法,innerHTML它会编码所有div字符(当然).

我需要以某种方式将a的内部html绑定{{myVal}}到变量值.

我正在尝试在最终版本2.0.0中动态加载组件.

使用RC5我使用以下代码加载:

创建一个指令来加载控件:

import {
  CheckboxComponent, CheckboxListComponent,DatePickerComponent
} from '../components/';

@Directive({
      selector: '[ctrl-factory]'
    })
    export class ControlFactoryDirective implements OnChanges {
      @Input() model: any;

      constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver) {
      }

      create(cp) {
        this.resolver.resolveComponent(cp)
          .then(factory => {
            const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
            this.vcRef.createComponent(factory, 0, injector, []);
            let ch = this.vcRef.createComponent(factory, 0, injector, []).instance;
            ch.model = this.model;
        });
      }

      ngOnChanges() {
        if (!this.model) return;

        switch (this.model.type) {
          case 'checkbox':
            this.create(CheckboxComponent);
            break;
          case 'checkboxlist':
            this.create(CheckboxListComponent);
            break;
          case 'datepicker':
            this.create(DatePickerComponent);
            break;
          default:
            break; …

我正在尝试做的angular 2.1.0是动态创建应该注入父组件的子组件.例如父组件是lessonDetails包含用于所有课程如像按钮共享的东西Go to previous lesson,Go to next lesson和其他东西.基于路径参数,应该是子组件的课程内容需要动态注入父组件.子组件的HTML(课程内容)在外面的某处定义为普通字符串,它可以是以下对象:

export const LESSONS = {
  "lesson-1": `<p> lesson 1 </p>`,
  "lesson-2": `<p> lesson 2 </p>`
}

通过innerHtml在父组件模板中使用类似的内容,可以轻松解决问题.

<div [innerHTML]="lessonContent"></div>

在路径参数的每次更改的情况下lessonContent,父组件的属性将改变(将从LESSON对象获取内容(新模板)),从而导致更新父组件模板.这有效,但角度不会处理通过注入的内容,innerHtml因此无法使用routerLink和其他东西.

在新的角度释放之前,我使用来自http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2/的解决方案解决了这个问题,我一直在使用ComponentMetadata它ComponentResolver来动态创建子组件, 喜欢:

const metadata = new ComponentMetadata({
  template: this.templateString,
});

当templateString传递给子组件的Input属性为子组件.双方MetaData并ComponentResolver已被弃用/去掉angular 2.1.0. …