web-dev-qa-db-ja.com

Angular 5のdivにコンポーネントを動的に追加します

私はこれを持っています

https://angular-dynamic-component-append.stackblitz.io/

要素を動的に追加できましたが、コンパイルされません。 this のような多くのチュートリアルを見ました

しかし、それは私が本当に必要としているものではありません。また、多くの場合、ハッシュタグ表記を使用してコンテナーを識別します。

カスタムディレクティブが含まれている可能性がある要素にコンポーネントを追加する必要があります。

追加された要素の[hidden]属性を制御するには、ディレクティブのバインド値も使用する必要があります。

ゴール

  1. 既存のコンポーネントの動作を上書き：
    • 表示/非表示にする属性を追加する
    • 外観をカスタマイズするクラスを追加する
  2. HTMLコーディングを減らす
    • コンポーネント全体を書く必要はありません<my-comp></mycomp>
    • クラスを知る必要はありません
    • クラス名が変更された場合の自動動作
      1. ディレクティブが適用される要素を変更する
    • 最終的な目標は、contaner要素にクラスを追加することです

予想されるソース

<div [myDirective]="myBoolean">
    <p>some content</p>
</div>

予想されるコンパイル済み

<div [myDirective]="myBoolean" class="myDirectiveClass1">
    <p>some content</p>
     <someComponent [hidden]="myBoolean" class="myDirectiveClass2"></someComponent>
</div>

これを達成する方法はありますか？

前もって感謝します

angulartypescriptangular-directiveangular5
4
Sampgun

これが私がそれを働かせた方法です

import {
  Renderer2,
  Directive,
  Input,
  ElementRef,
  OnChanges,
  ViewEncapsulation
} from "@angular/core";
import { MatSpinner } from "@angular/material";

@Directive({
  selector: "[myDirective]"
})
export class MyDirective {

  @Input()
  set myDirective(newValue: boolean) {
    console.info("myDirectiveBind", newValue);
    if (!!this._$matCard) {
      const method = newValue ? "removeClass" : "addClass";
      this.renderer[method](this._$matCard, "ng-hide");
    }
    this._myDirective = newValue;
  }

  private _myDirective: boolean;
  private _$matCard;

  constructor(private targetEl: ElementRef, private renderer: Renderer2) {
    this._$matCard = this.renderer.createElement('mat-card');
    const matCardInner = this.renderer.createText('Dynamic card!');
    this.renderer.addClass(this._$matCard, "mat-card");
    this.renderer.appendChild(this._$matCard, matCardInner);
    const container = this.targetEl.nativeElement;
    this.renderer.appendChild(container, this._$matCard);
  }


}

import {
  Component,
  ElementRef,
  AfterViewInit,
  ViewEncapsulation
} from '@angular/core';

@Component({
  selector: 'card-overview-example',
  templateUrl: 'card-overview-example.html',
  styleUrls: ['card-overview-example.css']
})
export class CardOverviewExample {
  
  hideMyDirective = !1;

  constructor(private _elementRef: ElementRef) { }

  getElementRef() {
    return this._elementRef;
  }

  ngAfterViewInit() {
    let element = this._elementRef.nativeElement;
    let parent = element.parentNode;
    element.parentNode.className += " pippo";

  }
}
.ng-hide {
  display: none;
}
<mat-card>Simple card</mat-card>
<div class="text-center">
  <button (click)="hideMyDirective = !hideMyDirective">
    Toggle show dynamic card
</button>
</div>
<br />
<span>hideMyDirective: {{hideMyDirective}}</span>
<hr />
<div class="myDiv" [myDirective]="hideMyDirective">
    <ul>
      <li>My content</li>
      </ul>
</div>
2
Sampgun

とても簡単です。私はあなたに例を挙げました。

ローダーディレクティブ内のコメントを読んでください。

https://github.com/garapa/studying/tree/master/loader

編集：

コンポーネント：

export class LoaderComponent {

  loading;

  constructor() { }

}

あなたの指令

export class LoaderDirective implements OnDestroy {

  private componentInstance: ComponentRef<LoaderComponent> = null;

  @Input()
  set appLoader(loading: boolean) {
    this.toggleLoader(loading);
  }

  constructor(
    private viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver
  ) { }

  toggleLoader(loading: boolean) {
    if (!this.componentInstance) {
      this.createLoaderComponent();
      this.makeComponentAChild();
    }

    this.componentInstance.instance.loading = loading;
  }

  private createLoaderComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(LoaderComponent);
    this.componentInstance = this.viewContainerRef.createComponent(componentFactory);
  }

  private makeComponentAChild(){
    const loaderComponentElement = this.componentInstance.location.nativeElement;
    const sibling: HTMLElement = loaderComponentElement.previousSibling;
    sibling.insertBefore(loaderComponentElement, sibling.firstChild);
  }

  ngOnDestroy(): void {
    if (this.componentInstance) {
      this.componentInstance.destroy();
    }
  }

}

あなたモジュール

@NgModule({
  ...
  entryComponents: [
    LoaderComponent
  ]
})
4
Leandro Lima

コンポーネントが挿入されるコンポーネントhtmlファイル内：

<div #target>
</div>

コンポーネントが挿入されるコンポーネントtsファイル内：

'Component_to_insert'->は、別のコンポーネント内に挿入されるコンポーネントです。

import { Component_to_insert } from 'path';
import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, AfterViewInit } from '@angular/core';

@Component({
selector: 'component-name',
templateUrl: 'component.html',
styleUrls: ['component.scss'],
entryComponents: [Component_to_insert]
})

export class ManagetemplatesPanelComponent implements AfterViewInit {

    @ViewChild('target', { read: ViewContainerRef }) entry: ViewContainerRef;

    constructor(private resolver: ComponentFactoryResolver) { }

    ngAfterViewInit() {
     this.createComponent();
    }

    createComponent() {
      this.entry.clear();
      const factory = this.resolver.resolveComponentFactory(Component_to_insert);
      const componentRef = this.entry.createComponent(factory);
    }
}
0
Kanish Mathew