角度4/5 |ドロップダウンディレクティブ

Question

DOMエレメントにドロップダウンを追加するためのドロップダウンディレクティブを作成しようとしています。私はこの指令を書いた：

この指令は、それが適用されるDOM要素のクリックを基本的に聴いています。クリックを登録すると、（displayプロパティを使って）ディレクティブを適用した要素と同じコンテナにあるドロップダウン要素を切り替えたいと思います。私のhtmlコードを簡略化した形で次のようになります。

<a appDropdown>Dropdown</a> 
<ul class="dropdown"> <--- How can I apply a display style property to this element when clicking the anchor (to hide/show the dropdown)? 
    <li><a>Option A</a></li> 
    <li><a>Option B</a></li> 
</ul> 

私は慎重に角度のドキュメントを読んでいますが、そこに説明されていません。

私はあなたの問題を願っています。ありがとう！

Answer 1

それは、このディレクティブの正しい使用ではないというのが私の理解だために同じdiretive更新を書くことができangular2することと同じであるため。私は非常に似た出力を達成しようとしています。

私は同様のドキュメントを実装しようとしています（上記の@ evandro-mendesの答えを参照）。構造ディレクティブは、テンプレートそのもの（see angular docs）を定義せずにDOMの動作を変更するように設計されています。

https://github.com/valor-software/ngx-bootstrap/blob/development/src/dropdown/bs-dropdown.directive.ts（またはdocs/demo https://valor-software.com/ngx-bootstrap/#/dropdowns）を参照してください。コンポーネントの表示/非表示/操作にディレクティブを使用していますが、独自のコンテンツは宣言していません。

dropdown.component.ts：ngx-bootstrapを使用してマイ溶液

は、次のようにコンポーネントを作成することである

@Component({ 
    selector: 'dropdown', 
    template: './dropdown.component.html' 
}) 
export class AutosuggestComponent { 

    @Input() viewModel: string[]; 
    @Input() isOpen: boolean = false; 
} 

dropdown.component.html

<div dropdown [isOpen]="isOpen" [autoClose]="true" placement="top"> 

<ng-content #input> 
</ng-content> 

<div *dropdownMenu class="dropdown-menu" role="menu"> 
    <div *ngFor="let item of viewModel" class="dropdown-item"> 
     {{item}} 
    </div> 
</div> 

使い方

<dropdown [viewModel]="sourceData" [isOpen]="isDropdownOpen"> 
    <input type="text"> 
</dropdown> 

私は任意のカスタム動作を定義していない、まだアプリ内の任意の入力のためのドロップダウンを使用することができますこの方法です。

希望します。

Answer 2

マンは以下を参照してください。https://github.com/pleerock/ngx-dropdown角度4または5のドロップダウンを使用して、フォーク、あなたの必要

Answer 3

いくつかのAngular5属性を含める必要があります。偉大な答えを

Building An Angular 5 Project with Bootstrap 4 and Firebase