각도 4/5 | Dropdown 지시문

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의 대답)를 읽으면서 구조 지시문은 템플릿 자체를 정의하지 않고 DOM의 동작을 변경하도록 설계되었습니다 (see angular docs).

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