Angular: 제안: 구성 요소 선언에서 호스트 요소에 지시문을 추가하는 기능이 필요합니다.

에 만든 2016년 05월 23일 · 114코멘트 · 출처: angular/angular

저는 Angular 2를 파헤쳤고 특정 종류의 구성 요소를 확장하기 위한 잠재적인 장애물에 부딪쳤습니다.

다음 예제에는 버튼 구성 요소와 터치 이벤트를 기반으로 스타일을 적용하는 지시문이 있습니다. 정확히 동일한 터치 동작을 상속하는 버튼 외에도 많은 다른 개체가 있습니다. 나는 내 옵션을 탐색했고, 나는 길을 잃었다:

TouchClass를 직접 확장합니다. typescript가 다중 클래스 상속을 지원하지 않기 때문에 이것은 이상적이지 않은 것 같습니다. 또한 소비자가 자신의 클래스에서 사용할 수 있도록 동작을 노출하고 싶습니다.
인터페이스를 통해 가짜 다중 클래스 상속. 이것은 해킹처럼 보이며 혼합하려는 모든 클래스에서 shim API를 다시 선언해야 합니다. https://www.stevefenton.co.uk/2014/02/TypeScript-Mixins-Part-One/
구성 요소 생성자의 elementRef.nativeElement에서 직접 서비스를 통해 수행하는 도우미 함수를 만듭니다. 워커에서 실행할 때 nativeElement가 null이 될 것이라고 문서에 명시되어 있고 그 기능이 제가 가장 기대하는 부분이기 때문에 저는 정말로 이것을 하고 싶지 않습니다.

너무 깊이 들어가지 않고 componentMetadata를 구성 요소 컴파일 시간 동안 사용할 수 있고 호스트 속성에서 동적으로 추가하고 동시에 컴파일할 수 있는 추가 지시문을 검색할 수 있다고 가정합니다. 이를 통해 각도 방식으로 믹스인을 수행할 수 있습니다. 구성 가능한 지시문을 사용하여 기능을 확장하고 뷰 투영을 중단하지 않고 수행할 수 있습니다. 아래의 짧은 예.

현재 행동
componentMetadata.host에서 지시문을 선언하면 이를 일반 속성으로 처리합니다.

예상/원하는 행동
호스트에 선언된 지시문은 컴파일 시간에 처리됩니다.

/**
 * App
 */
@Component({
    selector: 'app-component',
    template: '<g-btn>TEST</g-btn>',
    directives: [gBtn, gTouch]
})

export class AppComponent {
    constructor() {

    }
}

/**
 * Touch Directive
 * Will be used in lots and lots of components
 */
@Directive({
    selector: '[g-touch]',
    host: { 
        '(touchstart)': '...',
        '(touchend)': '...',
        '(touchmove)': '...',
        '(touchcancel)': '...'
    }
})

export class gTouch {
    constructor() {

    }
}

/**
 * Simple button component
 */
@Component({
    selector: 'g-btn',
    template: '<ng-content></ng-content>',
    host: {
        'role': 'button',
        // WOULD LOVE FOR THIS TO COMPILE THE DIRECTIVE!
        // right now it just adds an attribute called g-touch
        'g-touch': ' ' 
    }
})

export class gBtn {

    constructor() {

    }
}

이것이 어떻게 작동하는지에 대한 몇 가지 아이디어:

// Option 1: just scan the host properties for directives.
// This would be my ideal, simple and understandable
@Component({
    selector: 'g-btn',
    template: '<ng-content></ng-content>',
    host: {
        'role': 'button',
        'g-touch': true // or {prop: 'foo'} or string
    }
})

// Option 2: definitely more declarative using a hostDirectives property
// more declarative, albeit more annoying to have to reimport the touch class
@Component({
    selector: 'g-btn',
    template: '<ng-content></ng-content>',
    hostDirectives: gTouch,
    host: {
        'role': 'button',
        'g-touch': true
    }
})

// Option 3: declare host directives as its own thing, still just
// use keys pointing to bool, obj, or string
@Component({
    selector: 'g-btn',
    template: '<ng-content></ng-content>',
    hostDirectives: {
        'g-touch': {someOption: someOption}
    },
    host: {
        'role': 'button',
    }
});

// Option 4: Not a huge fan of this one, but understandable if
// people want to keep one host property
@Component({
    selector: 'g-btn',
    template: '<ng-content></ng-content>',
    host: {
        'role': 'button',
        _directives: {
            'g-touch': true
        }
    }
});

모두에게 감사합니다. Angular 2가 멋지게 보입니다!. 내가 놓치고 있는 것이 있다면 알려주세요.

core directive matching host and host bindings feature

출처

jamesmfriedman

👍463 ❤75 🎉45 👀19 🚀17 😄9

가장 유용한 댓글

@IgorMinar Ivy 작업은 이것을 더 실현 가능하게 만듭니다. 그러나 예 과거 v6.

mhevery 에 2018년 01월 27일

👍22 🎉10 ❤6

모든 114 댓글

저는 현재 대규모 클라이언트를 개발 중이므로 모든 GUI 관련 문제를 재사용 가능한 Angular2 지시문으로 분해하려고 합니다. James가 완벽하게 지적했듯이 이것은 항상 동일한 문제로 이어집니다.
이것은 좋은 모듈식 및 동적 아키텍처를 위해 어떻게든 작동해야 합니다. 터치 예제는 이것이 필요한 많은 시나리오 중 하나일 뿐입니다. 예: Drag&Drop, Resize 관찰 등
plunker로 또 다른 예를 만들었습니다.
https://plnkr.co/edit/J65THEMic0yhObt1LkCu?p=info

이 기능이 조만간 추가될 가능성이 있습니까?

다음은 이와 관련된 StackOverflow 질문입니다. http://stackoverflow.com/questions/37148080/use-angular2-directive-in-host-of-another-directive

Andy1605 에 2016년 07월 07일

👍31

@Andy1605 이 문제를 해결하는 방법을 찾은 적이 있습니까? 이 때문에 RC 중에 NG2로 작업할 예정이었습니다. 다시 선택하고 싶지만 이 특정 문제로 인해 확장 가능한 UI 패턴을 구축할 수 없습니다.

jamesmfriedman 에 2016년 09월 16일

나는 또한 Angular가 여기서 필수적인 기능을 놓치고 있다고 생각합니다. 구성 요소가 호스트에 대한 (여러) 속성 지시문을 선언하는 것이 가능해야 합니다. 그렇게 할 수 없다는 것도 제 프로젝트에 큰 걸림돌이 됩니다.
이것이 미래에 구현될 것인지 또는 수행할 수 없는 이유가 있는지 아는 사람이 있습니까?

jofran73 에 2016년 09월 24일

👍23

https://github.com/angular/angular.js/issues/15270 에서 이 문제에 대한 솔루션을 제안했습니다(각도 버전 1에도 해당)

내 생각은 지시문을 추가하는 기능 대신 컴파일 프레임워크에 수정되지 않은 필터링되지 않은 구성 요소 선언에 액세스할 수 있는 "hostTransforms"(각도 1의 경우 "nodeTransforms")라는 새로운 확장 지점이 있다는 것입니다. 구성 요소가 컴파일러에 의해 처음 발견되고 DOM에 삽입할 준비가 될 때마다 원래의 컴파일되지 않은 구성 요소 호스트 노드입니다. 이런 식으로 개발자는 사용자 지정 속성으로 구성 요소 데코레이터를 확장한 다음 nodeTransforms를 사용하여 컴파일 직전에 이러한 사용자 지정 속성을 각도 프레임워크에 익숙한 것으로 변환할 수 있습니다. 예제는 기능 요청 스레드를 확인하세요.

저는 Angular 2 소스 코드보다 Angular 소스 코드에 더 익숙하기 때문에 구현 프로세스가 여기에서도 동일할지 확신할 수 없습니다. 그러나 이것은 꽤 인기 있는 요청인 것 같기 때문에 Angular 2로 구현되고 백포트되거나 Angularjs로 구현되고 포워드포트되는 것을 보고 싶습니다(그게 그런가요?).

Aaron-Pool 에 2016년 10월 16일

oddlyfunctional 에 2016년 11월 01일

👎33 👍5

호스트에 기여하는 속성 지시문을 추가할 수 있는 기능이 훌륭할 것이라는 데 동의해야 합니다. 내 UI 구성 요소에 드래그/드롭 기능을 추가하는 것과 같이 더 "각도"를 구현하는 이러한 기능을 지금 사용할 수 있다는 것을 알고 있습니다.

host 메타데이터 속성 대신 구성 요소의 템플릿에 적용할 수 있는 <ng-container> 와 유사한 새 태그를 만드는 것은 어떻습니까? 지시문이 호스트 구성 요소에 추가되었음을 나타내는 <ng-host [attributeDirective]> 와 같은 것입니다.

jjstreet 에 2016년 11월 01일

👍14

@jjstreet 귀하의 제안은 replace: true (분명히 동일하지는 않지만 유사함)와 유사하게 들리는데, 이는 얼마 전에 더 이상 사용되지 않습니다. 그러나 replace: true 는 여기에 적용되지 않는 이유로 더 이상 사용되지 않습니다.

@pkozlowski-opensource 이에 대해 ng2 팀으로부터 어떤 종류의 응답을 받을 수 있습니까?

Aaron-Pool 에 2016년 11월 01일

나는 이것을 달성하기 위해 어떤 방법 으로든 게임입니다. 호스트 속성은 구성 요소의 로컬 범위에 액세스할 수 있고 이미 구성 요소 자체에 속성을 추가하기 때문에 제안했습니다. 지시문은 이 동작의 자연스러운 확장처럼 보입니다.

jamesmfriedman 에 2016년 11월 01일

👍13

+1 이 기능은 UI 구성 요소에 깨끗하고 재사용 가능한 코드가 있어야 합니다.

k3nsei 에 2016년 11월 14일

👍27

vlodko 에 2016년 12월 14일

👎35 👍4

이에 대해 ng2 팀으로부터 어떤 종류의 응답을 받을 수 있습니까? 그냥 하지 않겠다는 말이나, 좋은 생각이지만 현재 우선순위가 아니라는 말이라도, 조금이나마 의견을 듣고 싶습니다.

Aaron-Pool 에 2016년 12월 14일

👍25

이에 대한 다른 사용 사례를 추가하고 싶습니다. ng2-mobx(https://github.com/500tech/ng2-mobx)가 포장 구성 요소를 제거하고 훨씬 더 깨끗해 보이게 할 수 있습니다.

hccampos 에 2017년 01월 11일

👍6

이것도 갖고 싶습니다. 현재 사용자 정의 routerLink 지시문을 만드는 데 필요합니다. 각도를 재사용하고 mi 지시문으로 준비된 매개 변수를 제공하고 싶습니다.

따라서 <a [routerLink]="repeatedCodeToGetLink()"> 대신 <a [myRouterLink]> 있고 해결된 매개변수와 함께 [routerLink] 를 동적으로 적용합니다.

klinki 에 2017년 03월 09일

👍8

이것의 전망에 대해 정말 흥분됩니다!

우리는 이것을 잠시 동안 필요로 했습니다. 사실, 공개된 문제가 있다는 것을 알기 전에 스택 오버플로 에 대해 본질적으로 바로 이 기능에 대해

이 기능을 사용하여 잠시 동안 열어 둔 https://github.com/angular/flex-layout/issues/162 문제를 해결하는 방법에 대한 정교한 예를 제공했습니다. ( 예제 및 설명은 여기를 참조하십시오 )

우리는 피드백을 정말 기대하고 있습니다. 이 문제는 이 리포지토리에 있는 모든 미해결 문제 중에서

/cc @tbosch @IgorMinar @mhevery @jelbourn @hansl @ThomasBurleson

somombo 에 2017년 03월 30일

@jjstreet 나는 당신의 제안을 생각합니다

<ng-host myDirective="foo"></ng-host>

... 우리가 여기서 논의하는 것과는 다른 이유로 얼마 전에 만들어진 또 다른 별도의 제안과 잘 어울립니다.

https://github.com/angular/angular/issues/7297 참조

somombo 에 2017년 03월 30일

현재 부모 구성 요소에 지시문을 추가한 다음 @HostListener를 사용하여 호스트에 수신기를 추가하여 이 문제를 해결합니다.

부모.html
<my-component myDirective>

Component.ts
@HostListener('myEvent') handler() { // do stuff }

그러나 호스트에서 직접 속성을 추가할 수 있다면 더 깨끗할 것입니다...

fadzic 에 2017년 04월 04일

다음은 내가 이 문제를 처리한 방법입니다. 하지만 이 기능을 처음부터 구현하는 것이 가장 좋은 솔루션이라고 생각합니다.

내 스택 오버플로 답변의 전체 설명: http://stackoverflow.com/a/41650302/2959469
TL;DR 플런커 참조: https://plnkr.co/edit/TCagW8vOPrqSiOT9Oztf

somombo 에 2017년 04월 07일

Angular 팀에서 이에 대한 긍정적 또는 부정적인 의견을 기다리고 있음을 매월 알림입니다.

Aaron-Pool 에 2017년 04월 28일

👍3

@tbosch - 이 문제의 우선 순위에 대한 모든 대중의 생각. @angular/flex-layout 에도 영향을 줍니다.

ThomasBurleson 에 2017년 04월 28일

🎉16

@fadzic 이렇게하면 호스트 요소에 지시문을 추가 할 수 없습니다 ...

Component.ts
@HostBinding('attr.myHilite') myHilite = new myHiliteDirective()

또는 ElementRef 또는 Renderer2와 같은 매개변수가 필요한 경우 이와 같이
@HostBinding('attr.myHilite') myHilite = new myHiliteDirective(this.elementRef, this.renderer)

또한 호스트 요소에 지시문을 추가해야 하며 이 문제로 리디렉션되었습니다. 위의 코드를 사용하여 필요한 작업을 수행할 수 있었습니다. 저는 Angular를 사용하는 전문가는 아니지만 누군가가 이 접근 방식에 문제가 있으면 알려주세요. 감사 해요.

CoderDark 에 2017년 05월 02일

👍4

수명 주기 메서드가 호출되지 않기 때문에 작동하지 않는 @btinoco 입니다. Angular가 연결하는 대신 지시문을 사용하는 각 구성 요소의 모든 것을 수동으로 연결해야 합니다.

hccampos 에 2017년 05월 02일

👍5

@hccampos 감사합니다. 방금 시도했는데 내 지시문의 ngOnInit 가 실행되지 않았거나(내 구성요소에서 지시문을 수동으로 사용하지 않는 한) 내 구성요소의 ngOnInit() 에서 지시문의 ngOnInit() 를 호출합니다. . 다시 한번 알려주셔서 감사합니다.

CoderDark 에 2017년 05월 02일

@btinoco - 네. 미묘하지만 불쾌한 문제입니다. @angular/flex-layout이 곧 수정되기를 바라는 것입니다. ;-)

ThomasBurleson 에 2017년 05월 03일

👍7

이에 대한 Angular 팀의 소식이 있습니까? 이슈가 된지 1년이 넘었는데..

Dunos 에 2017년 05월 09일

👍2

이 문제에 대한 자세한 설명을 찾는 것은 매우 좋았습니다.
그런 다음 Angular 팀에서 피드백을 찾지 못한 것은 정말 멋지지 않았습니다.

matheo 에 2017년 05월 11일

👍5

이미 작동하는 솔루션에 관하여:

이 기능 요청은 믹스인과 매우 유사합니다. 사실 설명의 2번 글머리 기호는
이 기능은 실제로 공식과 일치합니다.
TypeScript 문서는 여기를 참조
Angular에서는 @Input() 클래스를 혼합하는 것과 같이 조금 더 나빠집니다.
기본 클래스에서 다시 선언해야 합니다.

오늘날 이미 작동하고 있는 또 다른 솔루션은 구성 요소에 래퍼 요소를 포함하고 거기에 지시문을 적용하는 것입니다.
예를 들어 구성 요소에 <wrapper g-touch>... 와 같은 템플릿이 포함된 경우

"elementRef.nativeElement에서 직접 서비스를 통해 수행하는 도우미 기능 만들기"와 관련하여:
네, 그것도 좋은 생각인 것 같습니다. 나는 지금 WebWorkers에 대해 신경 쓰지 않을 것입니다.
아직 실험적이며 프로덕션을 위한 몇 가지 더 큰 기능이 없기 때문에
WebWorkers에서 작동하는 라이브러리는 거의 없습니다.
예를 들어 DOM에 직접 액세스하는 재료 라이브러리도 참조하십시오.

tbosch 에 2017년 05월 13일

제안의 옵션 1)에 관하여:

호스트 속성 바인딩에 대한 현재 의미는 다음과 같습니다.
기본 HTML 요소에 myDir 속성을 설정하고
그러나 어떤 지시도 없습니다. 그러나 host 도 지시문을 도입할 수 있는 경우 사용자는 다음을 작성할 수 있습니다.
그리고 이것이 myDir 지시문에서 속성을 업데이트하지 않는 이유를 혼동할 것입니다.

@Component({
  host: {
    '[myDir]': true
  },
  template: '...'
})
class MyComp {}

옵션 1) 및 옵션 3) 관련:
동일한 요소의 지시문 사이에 일종의 host 바인딩을 도입하면 다음을 수행할 수 있습니다.

Angular가 지원하지 않는 데이터 바인딩 그래프의 주기로 이어지므로
오래된 값으로 인해 디버그하기 어려운 오류가 발생합니다. / "검사 후 표현식이 변경되었습니다." 오류.
서로를 주입하는 지시문에 비해 추가 성능 오버헤드가 발생합니다.
그리고 직접 소통합니다.

제안의 옵션 2)에 관하여:

예, 다른 모든 지시문과 마찬가지로 gTouch 클래스를 참조해야 하는 것이 이상해 보입니다.
NgModule 를 통해 트리거됩니다.

tbosch 에 2017년 05월 13일

@ThomasBurleson 사용 사례에 대해 오프라인에서 더 자세히 이야기

tbosch 에 2017년 05월 13일

@tbosch 저는 또 다른 옵션을 제안하고 싶습니다. 네이티브 Angular 태그를 도입하고 <ng-host> 라고 부르겠습니다.

참고: @mhevery 는 https://github.com/angular/angular/issues/7546 에 <ng-host> 태그 도입을 제안했지만 여기에서 동일한 태그 이름을 사용하고 있음에도 불구하고 제안은 별도이며 여기에서 제기된 문제를 해결하기 위한 것입니다.

ng-host 태그는 일반 지시문/컴포넌트 클래스로 구현되지 않고 대신 "마법" 프레임워크 코드가 됩니다... ng-content , ng-container 등과 유사합니다. .,
태그는 CSS :host 선택기와 유사한 방식으로 구성 요소 호스트에 대한 "포인터" 역할을 합니다.

모호한 시나리오를 피하기 위해 각 구성 요소는 최대 하나의 <ng-host> 블록

사용 방법은 다음과 같습니다.

// Option 5: Use `<ng-host>`.. Very declarative and intuitive
@Component({
  selector: 'g-btn',
  template: `
    <!-- 
      Besides comments, having dom code inside the template but outside of a declared 
      ng-host code block would raise an error (hopefully at compile-time) .
    -->

    <ng-host role="button" g-touch> 
      <ng-content></ng-content>
    </ng-host>
  `
})

somombo 에 2017년 05월 17일

🎉3

그건 그렇고 @tbosch , 답변 주셔서 감사합니다. 이 문제에 대한 귀하의 참여와 피드백에 진심으로 감사드립니다.

somombo 에 2017년 05월 17일

👍2

이 기능에 대한 다른 사람들의 생각은 구성 요소에만 해당됩니까, 아니면 지시문이 호스트에 다른 지시문을 적용할 수 있다면 의미가 있습니까? 사용 사례 A) 나중에 변경하려는 경우를 대비하여 코드에서 분리하고 B) 복제하지 않고 각 인스턴스에 일부 기본 기능을 적용하려는 몇 가지 타사 지시문에 대해 이 문제를 구독하기 시작했습니다. 사용할 때마다 설정합니다.

예를 들어, 애플리케이션 전반에 걸쳐 많은 수의 요소에 적용될 툴팁 지시문과 지연 및 appendToBody를 기본값으로 설정하려고 합니다(중앙 집중식 구성 개체를 지원하지 않음). 중앙 구성 개체를 지원하지 않았기 때문에 사용하려는 모든 곳에 3~4개의 속성을 넣어야 했습니다. 그리고 나중에 우리는 결국 그 라이브러리에서 멀어지게 되었고(Material 툴팁을 사용하기 시작함) 모든 툴팁을 수동으로 교체해야 했습니다. "래핑"하는 자체 지시문을 만들 수 있었다면 [mdTooltip]을 다른 라이브러리 대신 호스트에 적용하도록 해당 지시문을 변경하는 것만 큼 간단했을 것입니다.

MikeMatusz 에 2017년 05월 17일

👍17

@MikeMatusz 저도 그것을 염두에 둔 것 같습니다. 여기 https://github.com/angular/flex-layout/issues/162#issuecomment -290350270의 스니펫이

@Directive({
  selector: 'fxLayoutFullPage',
  hostDirectives: [LayoutDirective],
  host: { 
    'fxLayout': 'column', 
    'style': 'min-height:100vh; background-color:yellow'
  }, 
}) class LayoutFullPageDirective {}

somombo 에 2017년 05월 17일

👍6

지시문을 인스턴스화하는 속성 데코레이터를 만들 수 있습니까?
예를 들어:
@HostDirective(LayoutDirective) myLayoutDirective: LayoutDirective;

이것은 구성 요소 및 지시문에 대해 작동하고 상호 작용을 위한 인스턴스 참조를 제공하며 구성 요소/지시문에서 상속할 때 손실되지 않습니다.
입력 및 이벤트 바인딩도 제공하려는 경우 더 복잡해집니다.

jofran73 에 2017년 05월 18일

👍13

이것은 어디에 서 있습니까? 저는 Angular2/4를 처음 접했고 한 번에 여러 다른 지시문을 적용하는 지시문을 만들고 싶습니다. 다음 대신:

<button directiveA directiveB directiveC>BUTTON TEXT</button>

그냥 쓸 수 있습니다 :

<button customDirectiveABC>BUTTON TEXT</button>

기본 구성/DRYness가 쉬워야 할 것 같습니다. 그러나 내가 말할 수있는 한 그것은 불가능합니까?

soynog 에 2017년 07월 28일

👍18

https://github.com/angular/flex-layout/issues/76#issuecomment -310509013도 참조

tbosch 에 2017년 07월 31일

@soynog , 저도 똑같은 느낌입니다. 또한 이것이 어디에 있는지 알고 싶습니다.

md-dialog-container 지시문을 동적으로 추가하고 싶은 Angular Material 및 angular2-dragable(angular/material#1206은 아직 지원되지 않기 때문에)을 사용하여 드래그 가능한 대화 상자를 만들 수 있기를 바랐습니다 MdDialog 서비스는 생성하지만 동적 지시문에 대한 Angular 1.x 컴파일러의 동작을 여기에서 얻는 것이 훨씬 더 어려워 보입니다.

@tbosch , @ThomasBurleson , Thomas가 angular/material#1206에서 우연히 제기한 문제 또는 목표와 관련된 오프라인 사용 사례입니까? 1.6.x와 2+ 프레임워크 사이의 동작 변경 사항에 대해 설명하려고 합니다.

DanielCaspers 에 2017년 08월 24일

👍1

이 문제에 대한 업데이트가 있습니까? 초반에 주목을 받았지만 더 이상 주목받지 못하는 것 같아요.

realappie 에 2017년 11월 01일

👍34

예, 그것에 대한 업데이트가 있습니까?

thefill 에 2017년 11월 24일

이것은 내가 매우 필요로 하는 것입니다. 이 제안이 그의 방식으로 상류에 도달하기를 바랍니다.

darkbasic 에 2017년 11월 24일

👍3

이것은 좋을 것입니다. 프로그래밍 방식으로/동적으로 지시문을 적용할 수 없다는 사실을 깨닫고 슬퍼졌습니다.

avatsaev 에 2017년 12월 04일

👍1

+1
저도 마찬가지에요 :)
여러 지시문 바인딩을 필요한 모든 작업을 수행하는 사용자 지정 지시문으로 래핑하는 방법을 찾고 있습니다. 예를 들어 :

<my-cmp [myDirective]="content"
        [isOpen]="myCondition"
        customProp2="customClass"
        customProp1="customText">
 ...
</my-cmp>

모든 줄을 복사/붙여넣기 없이 재사용할 수 있도록 모든 것을 래핑하는 지시문을 만들 수 있다면 좋을 것입니다.

<my-cmp myCustomDirective>
</my-cmp>

그리고 내 사용자 지정 지시문에

<ng-host [myDirective]="content"
        [isOpen]="myCondition"
        customProp2="customClass"
        customProp1="customText">
</ng-host>

ChrisProlls 에 2017년 12월 04일

이번 호의 2주년을 맞아! 솔직히 이 기능은 매우 유용하므로 수백만 개의 래퍼를 만들지 않고도 고도로 구성 가능한 구성 요소와 지시문을 만들 수 있습니다. 가지고 있는 지시문에서 필요한 구성 요소를 구성하기만 하면 됩니다. 간단하고 깨끗하며 효과적입니다.

jack-bliss 에 2017년 12월 18일

👍10

@IgorMinar- 어쨌든 우리는 향후 개선 사항에 대해 레이더에 이 기능을 얻을 수 있습니까?

ThomasBurleson 에 2017년 12월 18일

👍14

그러한 기능이 나쁜 패턴으로 간주되는지 알고 싶습니다. 누구나?

darkbasic 에 2017년 12월 18일

@darkbasic - AFAIU, 이 기능이 없으면 개발자는 단순히 부모 지시문을 템플릿 보기 및 콘텐츠에 추가하기 위해 래퍼 요소( ng-container )를 도입해야 합니다.

ThomasBurleson 에 2017년 12월 18일

아니요, 래퍼를 사용하지 않고 구성 요소를 완전히 제어할 수 있는 것이 나쁜 패턴이라고 생각하지 않습니다. 필수품입니다.

princemaple 에 2017년 12월 18일

👍4

@bradlygreen 의견이

k3nsei 에 2017년 12월 19일

이 기능은 이 리포지토리의 모든 공개 문제 중에서 가장 인기 있는 요청(상위 5개는 아닐 경우)입니다... 인터넷을 통해 사실상 프레임워크로서 Angular가 쇠퇴했다는 보고서(실증적 데이터로 뒷받침됨)를 보고 있습니다... 제 생각에는 커뮤니티가 들리지 않는다는 감정을 일으키는 요인 중 하나입니다. 경쟁; vue.js 및 react는 모든 사람이 원하는 모든 작은 것을 반드시 구현하지는 않더라도 최소한 가장 인기 있는 요청 항목에 대한 지속적인 피드백을 제공하기 때문에 기반을 확보하고 angular를 능가했습니다. 너무 오래 기다렸다가 아무 소리도 들리지 않는 것이 너무 답답합니다. 간단한 "아니요, 우리는하지 않을 것입니다".

( "Angular slips" Js 프레임워크 섹션 참조)

somombo 에 2017년 12월 19일

👍22 😕2 😄1

... Angular / Vue / React / ...에 대한 일부 의견은 다양한 요인의 영향을 받는다고 생각하지만 ... 이 구체적인 기능은 실제로 어떤 형태의 구현 가치가 있을 것입니다. 적용된 디렉티브의 간단한 목록이 있는 솔루션) ... 그래서 Angular 핵심 팀의 구체적인 위치는 매우 환영받을 것입니다 ... 🥇

mlc-mlapis 에 2017년 12월 19일

특정 ETA는 없지만 2018년 렌더러에서 이 범주를 훨씬 쉽게 만들기 위해 노력하고 있습니다.

bradlygreen 에 2017년 12월 20일

👍26

2018년에는 상황이 크게 개선되기를 바랍니다.

보다:

https://www.businesswire.com/news/home/20180104005052/en/npm-Report-State-JavaScript-Reveals-Popular-Web
https://medium.com/@chriscordle/why -angular-2-4-is-too-little-too-late-ea86d7fa0bae

somombo 에 2018년 01월 06일

👎12 😄5 👍4 ❤1 😕1 🎉1

@somombo 이 글은 오래전에 헛소리로 확인되었습니다

실제로 자신의 물건을 아는 사람들은 작가를 비웃고 아무도 진지하게 받아들이지 않았습니다.

avatsaev 에 2018년 01월 06일

👍9 👎3

따라서 문제의 사실은 여기에서 이 문제가 Angular 팀에 대해 매우 낮은 우선순위라는 것입니다. 사실 그것은 가능한 가장 낮은 우선순위입니다.

AngularHQ에 게시된 우선 순위 목록을 참조하십시오 (문제 번호 8785 참조).

이 문제는 댓글 수에서 알 수 있듯이 커뮤니티에서 많은 토론과 관심을 불러 일으켰음에도 불구하고 마찬가지입니다.

이 문제에 관심이 있고 실제로 구현되기를 원하는 사람이라면.. 솔직히 _잠재적으로는 절대_ 기다리지 않고 공식 연례 Angular Survey를 작성하고 이 문제에 대한 느낌을 알릴 수 있습니다. 더 높은 우선 순위를 가져야 하며 나중에 보다 빨리 충족되는 것을 보고 감사할 것입니다.

Angular 팀이 수행한 모든 훌륭한 작업에 대해 감사하는 것을 잊지 마십시오!

somombo 에 2018년 01월 17일

👍9

또한 이 기능에 한 표를 던지고 싶습니다. 이것은 이 문제를 해결하려고 너무 많은 슬픔의 원인이 되었습니다.

dszidi 에 2018년 01월 26일

👍9

@somombo 아직 AngularHQ의 우선 순위에 대해 너무 많이 읽지 마십시오. 우선 순위 공식은 완전히 구체화되지 않았습니다. 하지만 v6이 출시된 후 이 기능 요청을 다시 검토해야 한다고 생각합니다. 이에 대한 대역폭이 더 빨리 확보되지 않아 이에 대한 작업이 컴파일러/코어 영역에서 이미 진행 중인 작업과 충돌하게 될 것입니다.

이것은 빠른 수정 요청이 아닙니다. 제대로 하려면 상당한 노력이 필요할 것이라고 생각하지만, 우리가 v6을 위해 작업하고 있는 것은 이것을 구현하기 훨씬 쉽게 만들 것입니다.

IgorMinar 에 2018년 01월 27일

👍14

@IgorMinar Ivy 작업은 이것을 더 실현 가능하게 만듭니다. 그러나 예 과거 v6.

mhevery 에 2018년 01월 27일

👍22 🎉10 ❤6

@IgorMinar 및 @mhevery 귀하가 귀하의 생각이 무엇이며 이 문제가 발생하기 전에 먼저 발생해야 하는 사항에 대한 구체적인 피드백을 제공해 주셔서 감사합니다. 제대로 처리됩니다.

무엇이 "빠른 수정"이고 무엇이 그렇지 않은지 우리 평신도에게 항상 명확한 것은 아닙니다. 그러나 이것이 빠른 수정 유형이 아니며 올바르게 수행되어야한다는 사실을 제외하고는 이것이 angular에 유용한 기능이 될 것이라고 느끼시는 것 같아서 특히 감사합니다.

우리는 당신이 매우 바쁘고 모든 단일 문제에 대해 이렇게 답변할 수 없다는 것을 알고 있습니다.
그래서 당신은 당신이 할 때마다 우리의 진심 어린 감사가 있습니다. 우리는 Angular v6 및 그 이후 버전을 기대하고 있습니다!

모든 훌륭한 작업에 감사드립니다!

somombo 에 2018년 01월 30일

👍12 😄3

컴포넌트 클래스가 지시문 클래스를 확장하거나 구현하도록 할 수 있습니다. 내부적으로 지시문을 적용하려는 경우 구성 요소의 논리일 수 있습니다.

export class gBtn extends gTouch

NateMay 에 2018년 03월 05일

👍1

@NateMay , 단일 클래스만 확장할 수 있습니다. 이 문제는 지시문을 사용하여 여러 기능을 구성하는 방법에 관한 것입니다.

jamesmfriedman 에 2018년 03월 05일

@NateMay 그것에 대한 두 가지 문제 - 첫째, 단일 클래스만 확장할 수 있고 둘째, 종속성 주입을 중단했습니다.

jack-bliss 에 2018년 04월 17일

내 2센트만 추가하면 됩니다. @uirouter/angular의 중첩 상태를 사용하여 각도, 재료 및 플렉스 레이아웃이 있는 다중 레이어 SPA를 구축 중입니다. 그런 다음 구성 요소 요소에 플렉스 지시문을 쉽게 적용할 수 없다는 것은 매우 제한적입니다.

따라서 이 기능에 투표하십시오.

robert-sutton 에 2018년 07월 25일

👍2

이 추가된 기능에 대해 +1

martindevnow 에 2018년 07월 26일

DOM에 표시되지 않는 ng-container 지시문을 추가할 수 있습니다.

교차 관찰자 API(요소가 뷰포트에 들어오거나 나갈 때 이벤트를 발생시킴)에 대해 이것이 필요했습니다. 요소가 표시/숨길 때 enter() 및 leave() 이벤트가 있는 intersector 지시문이 있습니다. 이 API를 내부적으로 사용해야 하는 특정 구성 요소가 있지만 템플릿에 추가 DIV를 추가하고 싶지 않았습니다.

그래서 내가 한 일은 component.html 에서 다음과 같습니다.

<ng-container intersector (enter)="weCameOnScreen()" (leave)="byeBye()">
     ... components normal template ...
</ng-container>

그런 다음 intersector.directive.ts 지시문 생성자는 ElementRef 삽입합니다.

    constructor(private intersectorElementRef: ElementRef) { ... }

일반 DOM 요소의 경우 intersectorElementRef.nativeElement 에서 작업하지만 ng-container 경우 노드는 실제로 주석 노드입니다. 그래서 댓글인지 확인만 하고, 댓글이면 한 단계 올라갑니다.

public ngAfterViewInit(): void 
{
    // if the directive is applied to an ng-container must go a level up
    this.domElement = (this.intersectorElementRef.nativeElement.nodeType == 8) ? this.intersectorElementRef.nativeElement.parentElement : this.intersectorElementRef.nativeElement;

   registerIntersector(this.domElement ...);

모든 상황에 적용되는 것은 아니지만 현재로서는 괜찮습니다. 나는 IVY 컴파일러에서 더 이상 주석을 사용하지 않을 수 있다고 생각합니다. 그래서 이것이 깨질 수 있습니다. 중요한 것은 내가 DOM 노드에서 사용할 수 있는 단일 지시문이나 지시문에 대한 가짜 ' @HostBinding '으로 효과적으로 사용할 수 있다는 것입니다.

simeyla 에 2018년 08월 21일

👍1

지시문을 동적으로 추가할 수 있기를 정말로 바랐습니다. 더 낮은 수준의 지시문을 "고차", 더 추상적인 지시문으로 캡슐화할 수 있기를 원합니다. 스택 오버플로에 대해 다음과 같은 질문을 했는데, 앞으로 이에 대한 해결책이 있을지 궁금합니다. https://stackoverflow.com/questions/51608645/abstract-away-leaflet-directive-in-custom-directive

saberone 에 2018년 08월 21일

@mhevery가 말했듯이.. 우리는 인내심을 갖고 아이비 전체 버전(ng v7.0.0 ?)이 출시될 때까지 기다려야 합니다. 분명히 아이비로 구현하는 것이 훨씬 더 쉬울 것입니다... 아이비 이후에는 이 기능이 우리에게 얼마나 중요한지 팀에 상기시켜 잊지 않도록 해야 합니다 😉

somombo 에 2018년 08월 21일

👍8

이에 가입합니다. 또한 resolveComponentFactory/createComponent로 생성한 구성 요소에 지시문을 동적으로 연결할 수 있어야 합니다.

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentItem.component);

const componentRef = viewContainerRef.createComponent(componentFactory);
(<DynamicComponent>componentRef.instance).data = componentItem.data;
(<DynamicComponent>componentRef.instance).cssClassList = componentItem.cssClassList;
// Add directive to new component here
// componentRef.addDirective(someDirective)

ermcgrat 에 2018년 08월 24일

👍3

모든 업데이트???
타사 지시문을 사용하는 다른 사용 사례에 부딪쳤습니다
일부 시나리오에서는 HTML 요소에 대한 지시문을 동적으로 제거/추가해야 합니다.
어떤 식 으로든 가능하거나 아직 솔루션을 보류 중입니까?

micronyks 에 2018년 08월 27일

👎3 👍1

@micronyks ... 실제로 지시문을 동적으로 추가하는 것은 불가능합니다. 우리는 그러한 기능을 만들 가능성을 추가해야 하는 Ivy를 기다려야 합니다.

mlc-mlapis 에 2018년 08월 27일

@mlc-mlapis 하지만 IVY는 언제 올 계획인가요? 어떤 버전에서?

micronyks 에 2018년 08월 27일

@micronyks ... 일정에 따라 Angular 7.

mlc-mlapis 에 2018년 08월 27일

여기에서 합리적으로 생각합시다. Angular 팀은 수요가 많은 몇 가지 거대한 기능(PWA, SSR, Ivy, 특히 Custom Elements)에 대해 열심히 노력하고 있습니다. 마이크로소프트와 같은 대기업들이 영원히 그것을 요구해왔고, 거기에는 이유가 있습니다. 효율적인 사용자 정의 요소를 달성하려면 Ivy가 필요합니다. @mhevery가 말했듯이 Ivy를 사용하는 즉시 엔진이 동적 지시문을 더 쉽게 허용할 것입니다.

그 동안에 이 기능을 계속 요구하는 대신(저도 btw가 필요합니다) 베타 테스트, 버그 보고, 문서 지원 등을 통해 Angular 팀이 프로세스를 가속화하도록 도울 수 있습니다.

Angular Team은 그렇게 크지도 않고 모두를 위한 멋진 프레임워크를 만들기 위해 노력하는 수십 명의 사람들에 불과하지만 시간이 걸린다는 것을 기억합시다.

avatsaev 에 2018년 08월 28일

👍22 👎9 ❤5

... 네, 지금은 조금 참을 필요가 있습니다. 우리가 Ivy에 대해 더 많은 것을 도울 수 있는 순간까지 기다려야 합니다... 컴파일러가 완료되고 일부 세부 설계 문서가 제공될 때입니다.

mlc-mlapis 에 2018년 08월 28일

@avatsaev 나는 당신이 말한 모든 것에 동의할 수 있습니다. 여기서 물건을 요구하면 안 됩니다. 그러나 Angular로 작업할 때 다루는 문제를 설명할 수 있습니다.

저는 경험이 풍부한 Angular 개발자가 아니지만 일부 사항이 잘못되었거나 명확하게 설명되지 않았습니다.

누수 추상화 없이 타사 구성 요소/지시문을 캡슐화하려고 하기 때문에 이 문제가 발생했습니다. 이것의 일부는 동적 지시문을 가질 수 있게 하는 것입니다. 나를 놀라게 하는 것은 그러한 일을 달성하는 것이 상당히 복잡하다는 것입니다.

saberone 에 2018년 08월 28일

👍4

JSON 구성을 취하고 양식을 생성하는 Angular Material 및 Flex-Layout을 사용하여 양식 생성기를 구축 중입니다. 이 기능은 런타임에 호스트 구성 요소에 flex-layout 지시문을 적용하는 데 도움이 됩니다. Angular의 가장 큰 자산 중 하나는 구성에서 런타임에 코드를 생성하는 기능인 것 같습니다. 이는 해당 코드를 보다 다양하게 만드는 데 큰 도움이 될 것입니다. 좋은 사용 사례에 빠지고 싶었습니다. 짜증 난 ;)

nayfin 에 2018년 09월 11일

👍13

그것이 나의 정확한 사용 사례입니다.

NateMay 에 2018년 09월 11일

@NateMay 당신이 그것을 확인하고 여기 내 구현이 있습니다.

nayfin 에 2018년 09월 11일

@NateMay 당신이 그것을 확인하고 여기 내 구현이 있습니다.

설명해 주시겠습니까? 나는 당신이 dynamic-field.directive 를 의미한다고 생각합니다.

antidote2 에 2018년 09월 23일

dynamic-field.directive 는 멋진 일을 하지만 다른 많은 일들도 일어나고 있습니다. 방금 로컬 설정에 대한 지침이 있는 루트 폴더에 CONTRIBUTING.md 를 추가했습니다. 몇 달 동안 프로덕션 단계에 있는 모든 항목에 사용하지 않도록 주의하십시오. 안정적인 구현을 위해 작업하면서 큰 변화를 만들고 있습니다.

nayfin 에 2018년 09월 24일

dubcdr 에 2018년 11월 28일

👎12 👍2 😕1

지금까지 내 해결 방법은 모두 단점이 있다는 것입니다.

has-it , 내 구성 요소 클래스 내에서 해당 지시문으로 새 멤버 속성을 정의하고 해당 생성자 함수를 호출할 때 필요한 모든 생성자 인수를 해당 지시문에 전달합니다(예: ElementRef, ViewContainerRef, TemplateRef... 요청하는 모든 주입 가능한 변수). , 현재 구성 요소의 해당 수명 주기 콜백 함수에 ngInit() ngAfterViewInit() 와 같이 있는 경우 해당 수명 주기 콜백을 수동으로 호출합니다.

@component(...)
class MyComponent {
   theDirective: TargetDirective;
   constructor(el: ElementRef) {
       this.theDirective = new TargeDirective(el);
   }

  ngOnInit() {
     this.theDirective.ngOnInit();
  }
  ...
}

최상위 ng 템플릿 내 구성 요소 템플릿의 모든 것을 래퍼,
<ng-template><div targetDirective>....</div></ng-template> ngAfterViewInit() 과 같이

const vf = this.viewContainerRef.createEmbeddedView(this.templateRef);
vf.detectChanges();

이런 식으로 Angular는 DOM 트리의 원래 구성 요소 바로 뒤에 해당 지시문과 내 구성 요소의 실제 콘텐츠가 포함된 또 다른 element 를 만듭니다.

<my-component></my-component>
<div targetDirective>....</div>

이 방법은 <route-outlet> 가 하는 것과 같습니다.

명백한 부작용이 있다

liujingbreak 에 2019년 01월 08일

👍8

이것이 이제 Ivy에서 가능한지 누군가 확인할 수 있습니까? 그렇다면 예를 들어본 사람이 있습니까?

LaniMoo 에 2019년 01월 31일

👍8

Angular Team은 그렇게 크지도 않고 모두를 위한 멋진 프레임워크를 만들기 위해 노력하는 수십 명의 사람들에 불과하지만 시간이 걸린다는 것을 기억합시다.

기여자 커뮤니티가 있으면 더 커질 수 있습니다.

그러나 이에 대한 기여 수정이 수락될 가능성은 매우 낮습니다.

그래서 대신 우리는 12명의 사람들로 돌아갑니다.

pauldraper 에 2019년 02월 10일

👍7

이것이 이제 Ivy에서 가능한지 누군가 확인할 수 있습니까? 그렇다면 예를 들어본 사람이 있습니까?

아직 아무 말도 없었기 때문에 내가 찾을 수 있는 가장 가까운 것을 제공할 것이라고 생각했습니다. 이것은 Ivy로 믹스인을 구현하는 것에 대한 얼마 전의 기사입니다: https://blog.nrwl.io/metaprogramming-higher-order-components -and-mixins-with-angular-ivy-75748fcbc310

기사에 따르면 이 스레드의 원래 문제에 대한 가능한 해결책은... "기능"이라는 새로운 기능을 사용하는 것입니다.

...이 기능에 대해 Google에서 무엇이든 시도하는 것이 약간의 악몽이라고 상상할 수 있습니다. 곧 공식 Ivy 문서가 출시되기를 바랍니다! :)

LaniMoo 에 2019년 04월 30일

👍9 👀3 🚀1

@nayfin 은 또한 시각적 양식 디자이너/빌더를 구축하고 있습니다.
그리고 몇 달 동안 작업을 하다가 동적으로 추가된 div에 지시문을 배포할 방법이 없다는 사실이 저를 미치게 만듭니다. MyDirectiveFactory::apply(HTMLElement)

nop1984 에 2019년 07월 10일

👍3

이 기능은 최상위 지시문을 첨부하기 위해 항상 하나의 div 를 만들고 있기 때문에 압도적으로 환영받을 것입니다. 또한 flex-layout 지시문을 원하면 일회용 div도 만들어야 하며 이를 수행하지 않고 호스트 요소에 직접 연결할 수 있으면 좋을 것입니다.

tsteuwer 에 2019년 10월 20일

다음과 같은 지시문을 동적으로 추가할 수 있다면 정말 멋질 것입니다.

const msked = componentFactory.createDirective(MaskedInputDirective);
msked.textMaskConfig = {};
this.elementRef.directives.add(msked);

stephenlautier 에 2019년 10월 21일

👍35

또한 flex-layout 지시문을 원하면 일회용 div도 만들어야 하며 이를 수행하지 않고 호스트 요소에 직접 연결할 수 있으면 좋을 것입니다.

@tsteuwer 항상

하지만 예, 호스트 요소에 지시문을 적용하는 기능도 갖고 싶습니다. 호스트 요소를 스크롤 가능하게 만들고 Angular Material CDK에서 CdkScrollable을 적용하는 데 유용합니다.

BAM5 에 2019년 11월 19일

👍2

최상위 ng 템플릿 내 구성 요소 템플릿의 모든 것을 래퍼

이것에 대한 약간 더 매끄러운 대안은 https://github.com/trotyl/angular-contrib 을 사용하고 다음을 추가하는 것입니다.

host: { ngNoHost: '' }

이 프로젝트는 렌더러를 shim하고 부모가 아닌 ngNoHost 속성이 있는 요소의 자식을 렌더링합니다.

물론 동일한 단점이 많이 있습니다.

pauldraper 에 2019년 12월 16일

3년이 지난 지금까지 열려있다니 안타깝네요. 호스트 요소에 바인딩된 지시문은 코드 재사용 가능성을 실제로 향상시킵니다.

petriq 에 2019년 12월 19일

👍15 😄2

또한 flex-layout 지시문을 원하면 일회용 div도 만들어야 하며 이를 수행하지 않고 호스트 요소에 직접 연결할 수 있으면 좋을 것입니다.
@tsteuwer 항상
하지만 예, 호스트 요소에 지시문을 적용하는 기능도 갖고 싶습니다. 호스트 요소를 스크롤 가능하게 만들고 Angular Material CDK에서 CdkScrollable을 적용하는 데 유용합니다.

이상적이지는 않지만 다음과 같이 프로그래밍 방식으로 CdkScrollable을 만들 수 있습니다.
this.scrollable = 새로운 CdkScrollable(this.elementRef, this.scrollDispatcher, this.zone);
this.scrollable.ngOnInit();

수동으로도 파괴해야 합니다.
if (this.scrollable) {
this.scrollable.ngOnDestroy();
}

BenLune 에 2020년 01월 07일

👍3

https://github.com/angular/angular/issues/8785#issuecomment -361004682 IgorMinar Ivy 작업을 통해 이를 보다 실현할 수 있습니다. 그러나 예 과거 v6.

@mhevery 귀하의 의견에 대한 후속 조치:point_up_2:, 이제 Ivy가 마침내 완전히 상륙했습니다. v10 릴리스(또는 그 이전)에 이 기능을 사용할 수 있습니까? 그렇지 않은 경우 다른 고려 사항이 이를 더 지연시킬 수 있는 사항에 대해 알려주세요.

somombo 에 2020년 02월 20일

👍37

변경 사항이 있습니까?

UrbanNuke 에 2020년 04월 09일

👍7

이 특정 기능이 Angular 설문조사 https://twitter.com/angular/status/1252646001162088448?s=20 에 있었다면 가장 많이 득표한 항목이 될 것입니다.

princemaple 에 2020년 04월 22일

🚀2

가장 많이 투표된 기능이 많이 있습니다. 이 기능은 물론 @output 및 기타 여러 항목에 Observable을 사용합니다. 불행히도 현재 속도로는 결코 구현되지 않을 것입니다.

darkbasic 에 2020년 04월 22일

이 특정 기능이 Angular 설문조사에 있었다면 가장 많이 득표한 항목일 것입니다.

좋은 아이디어 @princemaple!

이상적이지는 않지만 실제로 설문조사의 "추가 의견" 섹션(질문 2)에서 해결할 수 있습니다.
그것이 말하는 곳 :

"How else should we improve Angular for you?"

따라서 기본적으로 이 기능에 관심이 있는 모든 사람은 "Issue #8785"가 구현되고 해결되는 것을 보는 데 관심이 많다는 사실을 설문조사에 응답하고 명시적으로 알려주시기 바랍니다.

설문조사에 대한 직접 링크는 다음과 같습니다.
https://goo.gle/angular-survey-2020

포스가 함께하길! 🙂

somombo 에 2020년 04월 22일

👍3 🚀1

나 역시 프로그래밍 방식으로 구성 요소에 더 많은 기능을 추가하는 방법에 대해 고심하고 있으며 솔직히 여기에서 제안하는 일부는 이러한 특정 문제에 접근하는 가장 좋은 방법인 것 같습니다.

나는 그 기사와 관련하여 Angular 팀원들과 이야기를 나눴습니다.

이것이 이제 Ivy에서 가능한지 누군가 확인할 수 있습니까? 그렇다면 예를 들어본 사람이 있습니까?
아직 아무 말도 없었기 때문에 내가 찾을 수 있는 가장 가까운 것을 제공할 것이라고 생각했습니다. 이것은 Ivy로 믹스인을 구현하는 것에 대한 얼마 전의 기사입니다: https://blog.nrwl.io/metaprogramming-higher-order-components -and-mixins-with-angular-ivy-75748fcbc310

그리고 기본적으로 이것이 Angular의 내부를 해킹한다는 인상을 주었고, 사실 일반적인 사용자 소비를 위해 설계되지 않았습니다.

우리가 이 작업을 수행할 수 없도록 하는 기술적인 이유가 있는 경우에는 어떻게 될지 모르겠습니다. 하지만 우리가 이 작업을 수행할 수 있는 능력이 있다면 Angular를 사용하는 나의 일상을 비약적으로 향상시킬 것이라고 생각합니다.

ronnyek 에 2020년 04월 30일

👍11 🚀2

“우리는 지역사회와 협력하기 위한 투자를 극적으로 늘렸습니다. 지난 3주 동안 공개 문제 수가 프레임워크, 도구 및 구성 요소 전반에 걸쳐 700개 이상의 문제로 감소했습니다. 우리는 2,000개 이상의 문제를 다루었고 앞으로 몇 달 동안 대규모 투자를 할 계획이며 커뮤니티와 협력하여 더 많은 일을 할 것입니다.” — @StephenFluin
Angular 10 발표에서

그래서 이것이 v11에서 이 문제가 해결되었음을 의미한다고 생각합니다. 🤞😏

가장 많이 요청된 기능 중 하나를 추가하는 것보다 "커뮤니티와 협력"(및 달래기)하는 더 좋은 방법이 있습니까!? (이것 😉)

그들의 말을 들어라!

somombo 에 2020년 07월 05일

👍4

기대치를 설정하기 위해 귀하가 요구하는 것은 사소한 작업량이 아니며 현재 데이터 구조는 실제로 이를 위해 설계되지 않았습니다. 따라서 이와 같은 것을 지원하려면 몇 가지 주요 엔지니어링이 필요합니다.

mhevery 에 2020년 07월 06일

👍10 🚀1

@mhevery 템플릿의 부모에서 적용하는 다릅니 까?

k3nsei 에 2020년 07월 06일

@k3nsei NgModule 관점에서 볼 필요가 있습니다. 실제로 모든 구성 요소의 인프라를 만드는 핵심 요소입니다.

mlc-mlapis 에 2020년 07월 06일

@mlc-mlapis @HostBinding 및 @HostListener가 있으므로 @HostDirective 가 해당 기능에 좋은 선택일 수 있습니다. Ivy api가 그러한 기능을 가능하게 한다는 이야기를 본 적이 있습니다.

저에게 요점은 재사용 가능한 정크 기능이 있는 확장/특성을 가질 수 있는 더 많은 분리된 클래스를 가질 수 있는 구성 API를 갖는 것입니다. 예를 들어 선택 가능, 확장 가능/접을 수 있습니다.

k3nsei 에 2020년 07월 06일

👍1

@k3nsei 그럴 수도 있지만 너무 동적이지 않은지 확실하지 않아 엄격하게 정적인 구조보다 성능이 떨어집니다.

mlc-mlapis 에 2020년 07월 06일

"기대를 설정하기 위해 당신이 요구하는 것은 사소한 작업량이 아니며 현재 데이터 구조는 실제로 이를 위해 설계되지 않았습니다. 따라서 이와 같은 것을 지원하려면 일부 주요 엔지니어링이 필요합니다." — https://github.com/angular/angular/issues/8785#issuecomment -654391378

@mhevery에 적시에 응답해 주셔서 감사합니다.

저는 이것이 매우 큰 도전이 될 것이라는 사실을 전혀 잊어버리지 않았다는 점에서 커뮤니티를 위해 말할 것이라고 생각합니다. 그렇지 않았다면 지금쯤이면 우리가 이것을 제대로(어떻게든) 달성할 수 있는 일부 타사 라이브러리를 만들었을 것이라고 확신합니다. [제가 알기로는 없습니다.]

또한, 말할 필요도 없이 여기에 기여하는 데 도움이 될 수 있는 낮은 매달린 과일(또는 기타)이 있으면 알려주십시오.

우리는 진심으로 감사하고 귀하의 진지한 의사 소통을 소중히 여기며 우리가 필요로하는 것과 현실적/실용적인 것에 대한 대화의 일부가 계속되기를 바랍니다.

somombo 에 2020년 07월 06일

👍5

내 이해는 Ivy가 이전보다 이것을 더 쉽게 만든다는 것입니다.

@mhevery

@IgorMinar Ivy 작업은 이것을 더 실현 가능하게 만듭니다. 그러나 예 과거 v6.

pauldraper 에 2020년 07월 07일

내 이해는 Ivy가 이전보다 더 쉽게 만든다는 것입니다.

나의 새로운 이해는 "더 쉽다"는 것이 여전히 "쉬움"을 의미하지는 않는다

somombo 에 2020년 07월 07일

😄1 👎1 👍1

나의 새로운 이해는 "더 쉽다"는 것이 여전히 "쉬움"을 의미하지는 않는다

Ivy: 당신이 2년을 보냈지만 여전히 가장 인기 있는 Angular 문제를 다루지 않은 것입니다.

pauldraper 에 2020년 09월 21일

😄2 👍2

Ivy: 당신이 2년을 보냈지만 여전히 가장 인기 있는 Angular 문제를 다루지 않은 것입니다.

@pauldraper 제 생각에는 이 특정 문제가

개인적으로 저는 오픈 소스일 뿐만 아니라 커뮤니티(및 사용자)가 실제로 영향을 미치는 방향이 있는 프로젝트를 다른 곳에서 찾아야 할 때라고 생각합니다.

somombo 에 2020년 09월 21일

@pauldraper 제 생각에는 이 특정 문제가

@somombo 이 문제가 몇 년이 지난 후에도 여전히 열려 있다는 사실에 실망하지만, 나는 당신에게 동의할 수 없습니다. 로드맵의 첫 번째 요점은 공개 github 문제를 명시적으로 처리하는 것입니다. 로드맵에 모두 나열하는 것은 의미가 없겠죠? 이 문제는 대부분의 upvoted 중 하나 (또는 가장 upvoted)와 내가 마침내 해결주의 바랍니다.

m-radzikowski 에 2020년 09월 21일

로드맵의 첫 번째 요점은 공개 github 문제를 명시적으로 처리하는 것입니다. 로드맵에 모두 나열하는 것은 의미가 없겠죠? 이 문제는 가장 많이 찬성(또는 가장 많이 찬성)된 문제 중 하나이며 마침내 해결되기를 바랍니다.

아니요, 이것은 단지 희망적인 생각입니다. https://github.com/angular/angular/issues/5689를 통해 읽어보십시오. 그들이 "강력한 형식의 형식"을 제외하고 가장 많이 투표된 문제를 해결하고 싶다는 표시는 전혀 없습니다. 미래

fxck 에 2020년 09월 21일

👍2

@pauldraper 제 생각에는 이 특정 문제가
@somombo 이 문제가 몇 년이 지난 후에도 여전히 열려 있다는 사실에 실망하지만, 나는 당신에게 동의할 수 없습니다. 로드맵의 첫 번째 요점은 공개 github 문제를 명시적으로 처리하는 것입니다. 로드맵에 모두 나열하는 것은 의미가 없겠죠? 이 문제는 대부분의 upvoted 중 하나 (또는 가장 upvoted)와 내가 마침내 해결주의 바랍니다.

모두 같은 .. 나는 기다림을 끝냈습니다.. 이 문제는 말 그대로 저에게 큰 방해 요소였습니다. 그래서 아직 예정에 없는 것 같다는 사실은 개인적으로 앞으로 나아가야 할 때라는 뜻이기도 하다. 다른 모든 사람들에게 행운을 빕니다.

somombo 에 2020년 09월 21일

👍4 😕2 👀1

"지시문에 지시문 추가 지원"으로 이름이 바뀌었으면 합니다. 이름이 혼란스러울 수 있지만 이 기능이 구성 요소에 국한되지 않고 지시문에서 작동하는 것이 중요하다고 생각합니다. 기능에 대한 다른 이름은 "묵시적 지시문" 또는 "첨부 지시문"일 수 있습니다. 즉, 템플릿에서 지정된 구성 요소 또는 지시문을 사용할 때 호스트 요소에 대한 암시적/첨부 지시문을 가져옵니다.

나는 이것을 여러 번 원했는데, 주로 합성이 상속에 비해 Angular에서 재사용의 더 깨끗한 형태이기 때문입니다. 다중 상속이 없고 생성자 매개변수를 전달해야 하고 일부 Angular 기능은 상속될 때 작동하고 나머지는 각 리프 클래스에서 "다시 연결"해야 하기 때문에 상속이 복잡할 수 있습니다.

지시문 인스턴스화의 구성 요소 로컬 또는 지시문 로컬 형식처럼 작동하는 "암시적/첨부된 지시문"을 상상합니다. 따라서 지시문 선택기가 템플릿 마크업에 존재하지 않아도 호스트 요소에서 지시문이 인스턴스화됩니다.

다음은 예입니다.

@Directive({
  selector: 'app-popup',
  attachDirectives: [
    FocusAreaDirective
  ]
})
export class PopupDirective {

  // Attached directives can be injected, just like template-declared directives today
  constructor(public focusArea: FocusAreaDirective) {
  }

}

연결된 디렉티브의 @Input() 및 @Output() 속성은 템플릿에서 사용할 수 있으며 연결된 디렉티브의 수명 주기 메서드는 호스트 구성 요소 수명 주기의 일부로 호출되어야 합니다. 첨부된 지시문은 호스트 요소에 바인딩할 수도 있습니다. 기본적으로 오늘날 템플릿 선언 지시문과 똑같이 작동하지만 템플릿에서 선언할 필요는 없습니다.

이 기능은 Angular에 상당한 이점을 제공하여 지시문 구성을 통해 더 깨끗하고 단순한 구성 요소 아키텍처를 가능하게 한다고 생각합니다.

오늘날 비슷한 형태의 지시문 재사용을 원하는 경우 두 가지 선택이 있습니다.

템플릿 마크업에서 관련 지시문 세트를 항상 함께 선언해야 합니다. 생성자에 필요한 지시문이 없으면 오류를 감지하고 던집니다. 필수 지시문이 동일한 요소에 선언되도록 요구할 방법은 없습니다. 이것은 템플릿 작성 및 문서화 관점에서 지저분하고 중복으로 인해 강력한 API 또는 계약이 아니지만 그렇지 않은 경우 끔찍하지 않습니다.
호스트 지시문 내에서 연결된 지시문을 수동으로 인스턴스화하고 생성자 매개변수, @Input/ @Output 속성, 호스트 바인딩 및 수명 주기 메서드를 내부 지시문에 전달합니다. 이것은 구성 요소 작성자에게 깨지기 쉬운 엉망이지만 관련 구성 요소의 간단한 집합이 주어지면 수행할 수 있습니다. 템플릿 작성에 훨씬 좋습니다.

다시 말해, 기능이 없으면 깨끗한+단순한 구성 요소 사용과 깨끗한+단순한 구성 요소 작성 사이에 불필요한 절충이 생기는 경우가 있습니다.

johncrim 에 2020년 11월 04일

👍2

@johncrim
실제 사례에서 사용자 지정 지시문에는 입력이 있고 이를 변환하고 연결된 지시문에 입력으로 전달하려고 합니다. 아마도 이것은 지시문 데코레이터 옵션의 host 속성과 유사한 구문으로 수행할 수 있습니다.

amakhrov 에 2020년 11월 04일

@amakhrov : 좋은 지적 - 명확성을 위해 예제에서 입력을 제외했습니다. 이것이 필요한 대부분의 경우에 첨부된 지시문에 대한 입력(또는 출력)을 변환할 필요가 없습니다. (이상적으로는) 구성 가능한 단위로 작동하고 해당 입력(또는 출력) 값은 템플릿에서 바인딩될 수 있습니다. 부모 지시문(또는 구성 요소)을 사용합니다.

명명 충돌 또는 명명 명확성 문제(구성에 대한 지시문을 설계할 때 피하려고 함)가 있거나 입력 또는 출력을 변환해야 하는 경우 부모에 첨부된 지시문을 삽입하여 매우 쉽게 처리할 수 있습니다. 지시문을 만들고 연결된 지시문에 위임하는 부모에서 새 입력 또는 출력 속성을 만듭니다.

johncrim 에 2020년 11월 05일

정정합니다.
이 문제는 이제 공식 로드맵의 "미래" 섹션에 나열됩니다. https://angular.io/guide/roadmap#support -adding-directives-to-host-elements 참조

호스트 요소에 지시문 추가 지원
오랜 기능 요청은 호스트 요소에 지시문을 추가하는 기능을 추가하는 것입니다. 이 기능을 통해 개발자는 상속을 사용하지 않고 추가 동작으로 자신의 구성 요소를 보강할 수 있습니다. 이 프로젝트는 API 정의, 의미론 및 구현 측면에서 상당한 노력이 필요합니다.

이제서야 알아차려서 언제 추가되었는지는 모르겠지만 좋은 소식이고 의미있고 든든한 몸짓이라는 점은 인정합니다. 계속해서 손가락질을 하게 됩니다.

올려주신 팀에 감사드립니다! 🙏🏾

somombo 에 2020년 11월 13일

🚀13 👍9 ❤7 🎉7

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급