在angular2中构建一个包装器指令（包装一些内容/组件） [英] Building a wrapper directive (wrap some content / component) in angular2

问题描述

我非常喜欢Angular2的新建筑指令。我想要的是创建一个弹出指令，它将用一些css类包装内容。

内容

内容可以是纯文本和标题，如：

 < div class =data> 
< h2>标头< / h2> 
内容放在这里。 
< / div> 
  

然后我想给这个指令属性，如： popup

 < div class =datapopup> 
< h2>标头< / h2> 
内容放在这里。 
< / div> 
  

该指令应该做的是将div封装在里面，让我们说：

 < div class =some class> 
< div class =其他一些课程> 
< div class =data> 
< h2>标头< / h2> 
内容放在这里。 
< / div> 
< / div> 
< / div> 
  

到目前为止，我描述的情况是这是一个属性或结构指令。

 从'@ angular / core'导入{Directive，ElementRef，HostListener，Input}; 
 
 @Directive（{
 selector：`[popup]`
}）
 
导出类PopupDirective {
 
 
} 
  

解决方案

另一个答案是相关但不同。

对于更接近的内容，请参阅：如何有条件地将div包含在ng-content中 - 我的解决方案适用于Angular 4，但链接的问题有一些关于Angular 2如何实现的提示。

我用组合和指令解决了这个问题。我的组件看起来像这样：
$ b

 从'@ angular / core'导入{Component，Input，TemplateRef}; 
 
 @Component（{
 selector：'my-wrapper-container'，
 template：`
< div class =whatever> 
< ng-container * ngTemplateOutlet =template>< / ng-container> 
< / div> 
`
}）
 export class WrapperContainerComponent {
 @Input（）模板：TemplateRef< any>; 
} 
  

和我的指令是这样的：

$ b '@ angular / core'; $ b

  import {Directive，OnInit，Input，TemplateRef，ComponentRef，ComponentFactoryResolver，ViewContainerRef}; 
 $ b @Directive（{
 selector：'[myWrapperDirective]'
}）
 export class WrapperDirective implements OnInit {
 
 private wrapperContainer： ComponentRef< WrapperContainerComponent取代; 
 
构造函数（
 private templateRef：TemplateRef< any> ;, 
 private viewContainerRef：ViewContainerRef，
 private componentFactoryResolver：ComponentFactoryResolver 
）{} 
 
 ngOnInit（）{
 const containerFactory = this.componentFactoryResolver.resolveComponentFactory（WrapperContainerComponent）; 
 this.wrapperContainer = this.viewContainerRef.createComponent（containerFactory）; 
 this.wrapperContainer.instance.template = this.templateRef; 
 
 
 $ / code> 

为了能够动态加载组件，您需要将您的组件列为 <$ c $在你的模块中使用c> entryComponent ：

  @NgModule（{
 import：[CommonModule]，
 declarations：[WrapperContainerComponent，WrapperDirective]，
 exports：[WrapperContainerComponent，WrapperDirective]，
 entryComponents：[WrapperContainerComponent] 
}）
 export class MyModule {} 
  

所以HTML到底是：

 < some_tag * myWrapperDirective /> 
  

呈现为：

 <我的包装器容器> 
< div class =whatever> 
< some_tag /> 
< / div> 
< / my-wrapper-container> 
  

I'm pretty new building directives with Angular2. What I want is to create a popup directive that will wrap the content with some css classes.

Content

Content can be pure text and headers like:

<div class="data">
    <h2>Header</h2>
    Content to be placed here.
</div>

Then I want to give this a directive attribute like: popup

<div class="data" popup>
    <h2>Header</h2>
    Content to be placed here.
</div>

What the directive should do, is to wrap the div inside, lets say:

<div class="some class">
    <div class="some other class">
        <div class="data">
            <h2>Header</h2>
            Content to be placed here.
        </div>
    </div>
</div>

The case i described so far, is this a attribute or structural directives.

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: `[popup]`
})

export class PopupDirective {


}

解决方案

The other answer is related but different.

For something closer, see this: How to conditionally wrap a div around ng-content - my solution is for Angular 4, but the linked question has some hints about how this might be doable for Angular 2.

I solved this problem with a component and a directive combined. My component looks something like this:

import { Component, Input, TemplateRef } from '@angular/core';

@Component({
  selector: 'my-wrapper-container',
  template: `
<div class="whatever">
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>
`
})
export class WrapperContainerComponent {
  @Input() template: TemplateRef<any>;
}

and my directive like this:

import { Directive, OnInit, Input, TemplateRef, ComponentRef, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[myWrapperDirective]'
})
export class WrapperDirective implements OnInit {

  private wrapperContainer: ComponentRef<WrapperContainerComponent>;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver
  ) { }

  ngOnInit() {
    const containerFactory = this.componentFactoryResolver.resolveComponentFactory(WrapperContainerComponent);
    this.wrapperContainer = this.viewContainerRef.createComponent(containerFactory);
    this.wrapperContainer.instance.template = this.templateRef;
  }
}

To be able to load your component dynamically, you need to list your component as an entryComponent inside your module :

@NgModule({
  imports: [CommonModule],
  declarations: [WrapperContainerComponent, WrapperDirective],
  exports: [WrapperContainerComponent, WrapperDirective],
  entryComponents: [WrapperContainerComponent]
})
export class MyModule{}

so the HTML in the end is:

<some_tag *myWrapperDirective />

Which renders as:

<my-wrapper-container>
  <div class="whatever">
    <some_tag />
  </div>
</my-wrapper-container>

这篇关于在angular2中构建一个包装器指令（包装一些内容/组件）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！