web-dev-qa-db-ja.com

angle2でラッパーディレクティブを構築（コンテンツ/コンポーネントをラップ）

私は、Angular2を使用して、かなり新しいディレクティブを作成しています。私が欲しいのは、いくつかのcssクラスでコンテンツをラップするポップアップディレクティブを作成することです。

コンテンツ

コンテンツは、次のような純粋なテキストとヘッダーにすることができます。

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

次に、次のようなディレクティブ属性を指定します。popup

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

ディレクティブが行うべきことは、divを内部にラップすることです。

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

これまで説明してきたケースは、これが属性または構造的なディレクティブです。

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

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

export class PopupDirective {


}
htmlangularangular2-directivesangular-template
13
Mikkel

他の答えは関連していますが、異なります。

詳細については、こちらをご覧ください： ng-content の周りに条件付きでdivをラップする方法-私の解決策はAngular 4ですが、リンクされた質問には、これがAngular 2に対してどのように実行可能かについてのヒントがあります。

コンポーネントとディレクティブを組み合わせてこの問題を解決しました。私のコンポーネントは次のようになります。

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

そして、このような私の指令：

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

コンポーネントを動的にロードできるようにするには、モジュール内でコンポーネントを entryComponent としてリストする必要があります。

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

したがって、最後のHTMLは次のとおりです。

<some_tag *myWrapperDirective />

次のようにレンダリングされます：

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

これは、コンポーネント属性セレクターとAngular 2 Content Projection <ng-content>

@Component({
  selector: 'my-app',
  template: `
    <div class="app"> 
        <div class="data" myWrapper>
            <h2>Header</h2>
            Content to be placed here.
        </div> 
    </div>
  `
})
export class AppComponent {}


@Component({
  selector: '[myWrapper]',
  template: `
    <div class="my-class">
      <div class="my-sub-class">
          <ng-content></ng-content>
      </div>
    </div>
  `
})
export class MyComponent {

}
8
Kld