Question

我是Angular2的新手。 Angular2没有提供ng-include指令。所以我通过这个plunk链接http://plnkr.co/edit/OjxKE9HWnDInKojuhhk8?p=preview

的帮助来定制它

在上面链接externel html文件传递给cusome组件。我也想要同样的情况..

但是我使用Rc5和角度2.4.0版本，所以我根据我的配置进行了这个插件。根据最新的角度版本，几乎没有区别

（差异）是 - ＆gt;指令声明，ComponentResolver重命名为
ComponentFactoryResolver喜欢的东西很少。

所以我得到2个问题

    1) @Input is not working only on plunker (but it's working my local environment)

https://plnkr.co/edit/IulUb7 这是错误

   2) entrycomponents error . Even I added it @NgModule decorator.for this please check this

https://plnkr.co/edit/0EfFX3?p=preview我在这里评论了@input。

    My Aim is pass external html(view) file to the include directive where I       
 want.just like angular1 include 

I want to use drective like

business.profile.view.html

<h1>This is profile</h1>
 <my-ng-include src="'business.profile.edit.html'"></my-ng-include>

business.common.component.ts

 import {Component, Input, ViewContainerRef, OnInit,OnDestroy, ComponentRef,     

    ViewChild,ComponentFactoryResolver} from "@angular/core";



@Component({
  selector: 'my-ng-include',
  template: `<div #myNgIncludeContent></div>`
})
export class MyNgInclude implements OnInit,OnDestroy  {

  // Private properties
  componentReference: ComponentRef<any>;

  isViewInitialized = false;

//  @Input('src') private templateUrl: any;

  @ViewChild('myNgIncludeContent', { read: ViewContainerRef })
  protected myNgIncludeContent: ViewContainerRef;

  constructor(private ComponentFactoryResolver: ComponentFactoryResolver ) {
 //   console.log(templateUrl,'templateUrl')
  }

  createContentComponent() {
    @Component({
      selector: 'my-ng-include-content',
      template: `<h1>This is template</h1>`,
      // templateUrl : templateUrl

    })
    class MyNgIncludeContent {}
    return MyNgIncludeContent ;
  }

  ngOnInit() {
    this.isViewInitialized = true;
    this.updateComponent(templateUrl);

 }

  updateComponent () {

    var dynamicComponent = this.createContentComponent();
    let factory = this.ComponentFactoryResolver.resolveComponentFactory(dynamicComponent);

    this.componentReference  = this.myNgIncludeContent.createComponent(factory);
 }

  ngOnDestroy() {
    // If we have a component, make sure we destroy it when we lose our owner
    if (this.componentReference) {
      this.componentReference.destroy();
    }
  }

}

@input（src）被评论

这里我将一个html文件传递给 myNgInclude 组件指令。

请帮我解决，我从2天开始苦苦挣扎谢谢

angular2 ng-include自定义指令中的错误？

0 个答案: