web-dev-qa-db-ja.com

レンダリングされたHTMLの余分な折り返し要素を削除する方法は？

私はangular 5 3日前に学習を始めたので、私はそれにかなり慣れています。また、angularJSとReactを使用してアプリケーションを開発していますが、私はそうではないと思いますangular 5つのコンポーネントが完全に機能する方法を理解します。たとえば、内部にカスタムテキストを含むカスタムボタンを作成した場合、これはこの方法で行う必要があるとは言いませんが、簡単な例です。私のポイントを示しています）このように：

<app-button>
  <app-text>
    My Text
  </app-text>
</app-button>

レンダリングされたDOMの結果は次のとおりです。

<app-button>
  <button>
    <app-text>
      <span>
        My Text
      </span>
    </app-text>
  </button>
</app-button>

これは判読不能ですが、この折り返し要素を削除してコンポーネントレイアウトを配置するだけでタグを置き換え、次の構造になる方法があるかどうかを知りたいと思いました。

<button>
  <span>
    My Text
  </span>
</button>

それらを削除する方法がない場合、あなたの提案は何ですか？ありがとう！

angularcomponentsangular5angular-template
10
SKOLZ

Angularコンポーネントはテンプレート付きのディレクティブです。 これによると ：

ディレクティブ構成@Directive（{property1：value1、...}）

selector： '.cool-button：not（a）'テンプレート内でこのディレクティブを識別するCSSセレクターを指定します。サポートされているセレクターには、要素、[属性] 、. class、および：not（）が含まれます。

そのため、コンポーネントセレクタは属性セレクタにもなります。あなたの例では、これを書く代わりに：

parent.component.html：

<app-button>
  <app-text>
    My Text
  </app-text>
</app-button>

これを書いてください：

parent.component.html：

<button app-button>
    <span app-text>My Text</span>
</button>

どこ ：

app-button.component.ts

...  
  selector: '[app-button]',
  template: `<ng-content></ng-content>
...

app-text.component.ts

...
  selector: '[app-text]',
  template: `<ng-content></ng-content>`
...

これは期待通りにレンダリングされます：

enter image description here

これらのボタンのスタイリングに関するコメントの後に更新：

ボタンコンポーネント内からボタンのスタイルを設定し、親コンポーネントにクラスを設定するには、:Host-context疑似クラスを使用します。それはdepricatedされておらず、うまく機能します

button.component.css

  :Host-context(.button-1)  {
    background: red;
  }
  :Host-context(.button-2)  {
      background: blue;
  }

app.component.html

<button app-button class="button-1">
    <span app-text>My Text</span>
</button>

<button app-button class="button-2">
    <span app-text>My Text</span>
</button>

これが [〜＃〜] demo [〜＃〜] です

6
Vega

同様の問題がありました。他の誰かが同じ問題を抱えている場合に備えて、私の解決策を提供します。

私のコンポーネントは、他のコンポーネント内で、または<router-outlet></router-outlet>からのルートとして使用できるはずです。セレクターを属性として使用した場合、[my-component]は、他のコンポーネント内で使用されていれば、完全に機能しました。ただし、<router-outlet></router-outlet>によって作成された場合、<div>は自動的に作成されました。

これを回避するには、単純に複数のセレクターを使用を使用し、セレクターを組み合わせることができると考えます。

これを考慮してください。コンポーネントで属性my-componentを使用し、<router-outlet></router-outlet>で作成する必要がある場合は、<section></section>でラップする必要があります。これを達成するには、単に次のようにします。

@Component(
    selector: 'section[my-component], my-component',
    ...
)

別のタグ内で使用すると、結果は次のようになります。

<whatevertag my-component>
     ... component content ...
</whatertag>

ルートとして使用する場合：

<section my-component>
     ... component content ...
</section>
0
ndvo