web-dev-qa-db-ja.com

angular componentによって作成されたホストHTML要素セレクターを削除します

angular 2、svg-rectは、以下のようにrectを作成するコンポーネントです。

<svg height="550" width="450" x="0" y="0">
    <g id="svgGroup">
        <svg-rect>
        <!--template bindings={}-->
            <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        <!--template bindings={}-->
        </svg-rect>
        <svg-rect>
        <!--template bindings={}-->
            <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        <!--template bindings={}-->
        </svg-rect>
    </g>
</svg>

ただし、特別な要素タグが作成されるため、これはrectをレンダリングしません。 svg-rectタグが削除されると、rectがレンダリングされます

<svg height="550" width="450" x="0" y="0">
    <g id="svgGroup">
        <!--template bindings={}-->
        <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        <!--template bindings={}-->
        <!--template bindings={}-->
        <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        <!--template bindings={}-->
    </g>
</svg>

Angular 1.x、ありますreplace： 'true'コンパイルされた出力を含むディレクティブタグ.angular2に同じものを実装できますか？

svgangular
39
Bhavik

Host要素を削除しようとする代わりに、有効なSVGであるが、影響のないものに変更します：element selectorの代わりに

selector: "svg-rect"

テンプレート内の対応する要素：

template: `...<svg-rect>...</svg-rect>...`

属性セレクターに切り替えます：

selector: "[svg-rect]"

その属性をグループ要素タグに追加します。

template: `...<g svg-rect>...</g>...`

これは次のように展開されます。

<svg height="550" width="450" x="0" y="0">
    <g id="svgGroup">
        <g svg-rect>
        <!--template bindings={}-->
            <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        <!--template bindings={}-->
        </g>
        <g svg-rect>
        <!--template bindings={}-->
            <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect>
        <!--template bindings={}-->
        </g>
    </g>
</svg>

これは有効なSVGであり、レンダリングされます。 Plnkr

29
John C

私が使用するコンポーネントのホストを削除する別のアプローチ。

ディレクティブremove-Host

//remove the Host of avatar to be rendered as svg
@Directive({
    selector: '[remove-Host]'
})
class RemoveHost {
    constructor(private el: ElementRef) {
    }

    //wait for the component to render completely
    ngOnInit() {
        var nativeElement: HTMLElement = this.el.nativeElement,
            parentElement: HTMLElement = nativeElement.parentElement;
        // move all children out of the element
        while (nativeElement.firstChild) {
            parentElement.insertBefore(nativeElement.firstChild, nativeElement);
        }
        // remove the empty element(the Host)
        parentElement.removeChild(nativeElement);
    }
}

このディレクティブを使用します。
<avatar [name]="hero.name" remove-Host></avatar>

remove-Hostディレクティブ、nativeElementのすべての子がHostの前に挿入され、Host要素が削除されます。

サンプルの要点
ユースケースに基づいて、いくつかのパフォーマンスの問題があるかもしれません。

29
Bhavik

コンポーネントからコンポーネントのテンプレートを取得できる別のアプローチがあります。
最初に、ブラウザレンダリングからタグを削除するコンポーネントを作成します（ここではタグを削除しようとはしていません）。

@Component({
  selector: 'tl-no-tag',
  template: `
    <template #tmp>
      <p>{{value}}</p>
    </template>`,
  styleUrls: []
})
export class TlNoTagComponent {
  @ViewChild('tmp') tmp: any;
  value = 5;
}

次に、別のコンポーネントのテンプレートに次のように記述します。

<tl-no-tag #source></tl-no-tag> <!-- This line can be placed anywhere -->
<template [ngTemplateOutlet]="source.tmp"></template> <!-- This line will be placed where needed -->

次に、ブラウザに次のようなものがあります。

<tl-no-tag></tl-no-tag>
<p>5</p>

だから、<p>{{value}}</p> TlNoTagComponentから。 <tl-no-tag></tl-no-tag>は引き続き存在しますが、cssまたはsvg-thingをブロックしません。

7
Timathon

次のようなものはどうですか：

:Host { display: contents; }

これをホストコンポーネントのcss（またはscss）ファイルに入れると、コンポーネントのボックスがレンダリングされなくなります。

N.B：これは以前にも機能しましたが、特に古いブラウザーをサポートするために開発している場合は特に、ブラウザーの互換性が心配になるでしょう。また、それが「実験」段階から完全に抜けているわけではないことも確信しています。また、ドキュメントは、これがアクセシビリティの問題を引き起こす可能性があると述べています。

4
tlm

Angular 1 to Angular 2 Upgrade Strategy doc ：を引用するには

Host要素を置き換えるディレクティブ（置換：Angular 1）のtrueディレクティブは、Angular 2.ではサポートされていません。多くの場合、これらのディレクティブは、通常のコンポーネントディレクティブ。

通常のコンポーネントディレクティブが機能しない場合がありますが、その場合は別のアプローチを使用できます。 svgの例： https://github.com/mhevery/ng2-svg

4
Mark Rajcok