相关疑难解决方法(0)

有没有办法在angular2中动态加载模板？在angular1中,我使用ng-include html在主控制器视图中加载不同的模板.我知道angular2只能接受1个templateUrl并且ng-include在angular2中进行了Google搜索并找不到任何引用.

我想动态更改templateUrl,我已经阅读了Angular 2中的动态模板URL.是的,我可以在组件初始化之前更改我的模板.但我想要的是当我点击按钮并更改网址时,我的html就更新了,就像双向数据绑定一样.

我尝试使用这样的组件:

templateUrl: (function() {
    return dynamicURl;
}())

但是当改变"dynamicUrl"时,并没有发生任何事情.我还使用dynamicComponentLoader再次加载我的组件,组件不会更改.

我试图实现这样的事情:我有一个名为的模型类ObjectTypeA,ObjectTypeB和ObjectTypeC.还有一个工厂ComponentFactory,它根据传入的对象类型将创建不同的组件:

ComponentFactory.ts

export interface ComponentFactoryInterface {

    static CreateComponent(obj: CommonSuperObject)

}

@Injectable()
export class ComponentFactory {

    public static CreateComponent(obj: CommonSuperObject){

        if (obj instanceof ObjectTypeA){
            return ObjectComponentA()
        }else if (obj instanceof ObjectTypeB){
            return ObjectComponentB()
        }

    }
}

在模板中,我想做这样的事情:

main_template.html

<components>
  <component *ngFor="#obj in objects">
     <!-- insert custom component template here -->
  </component>
</components>

如何动态插入关联的组件？

我可以做这样的事情(不是我喜欢的做法):

<components>
  <!-- loop over component models -->
  <custom-component-a *ngIf="models[i] instanceof ObjectTypeA">
  </custom-component-a>
  <custom-component-b *ngIf="models[i] instanceof ObjectTypeB">
  </custom-component-b>
</components>

但在许多层面上,这对我来说似乎是非常错误的(如果我添加另一个组件类型,我将不得不修改此代码和工厂代码). …

我没有使用打字稿而是使用ES6和angular2 alpha39动态加载组件.以下代码与我在我的应用程序中的代码类似.我注意到的是angular2不会创建DynamicComponentLoader和ElementRef的实例并注入构造函数.他们是未定义的.

如何使用ES6和angular2 alpha39注入DynamicComponentLoader ？

import {Component, View, Inject, DynamicComponentLoader, ElementRef } from 'angular2/angular2'

@Component({
  selector: 'dc',
  bindings: [ DynamicComponentLoader ]
})
@View({
  template: '<b>Some template</b>'
})

class DynamicComponent {}

@Component({
  selector: 'my-app'
})
@View({
  template: '<div #container></div>'
})
@Inject(DynamicComponentLoader)
@Inject(ElementRef)
export class App {
  constructor(
    dynamicComponentLoader, 
    elementRef
  ) {
    dynamicComponentLoader.loadIntoLocation(DynamicComponent, elementRef, 'container');
  }
}

我使用的是Angular 1.5+用Typescript,准备我的代码是兼容Angular 2.我的情况是,我的许多组件需要使用应用程序范围的存储库位置来映射到其templateUrl属性的视图,但有时视图需要特定的本地实现.

因此,通常视图托管在快速服务的CDN上,它们在多个站点之间重复使用,这些站点都属于相同的通用代码库,api等.这样做是为了防止重复它们并集中管理什么.需要重复.

很少,我需要覆盖此行为并使用更具体,微调的视图.所以我的方法是binding在被调用的组件中添加一个viewLocation,意图像这样使用它;

<component-name></component-name>是默认值.在这种情况下,使用默认CDN路径. <component-name view-location="local"></component-name>是一种独特的情况.如果发生这种情况,templateUrl应该能够响应并切换到相对于特定应用程序而不是CDN的路径.

我认为这很简单,直到我意识到我无法访问实际构造函数或templateUrl函数中的绑定属性,如此处所示;

export class SidebarComponent extends Component {
   constructor() {
      super();
      this.bindings = { viewLocation: '=' };
      // other properties
      this.templateUrl = ($someService: IServiceInterface): string => {
         // help! I don't have access to the viewLocation property!
      }
   }
}

那么我有什么办法可以访问该属性吗？