컴포넌트를 확장 / 상속하는 방법?

기본 구성 요소가 변경 될 수 있으며 이러한 변경 사항이 파생 구성 요소에도 반영되기를 원하므로 Angular 2에 이미 배포 된 일부 구성 요소의 확장을 거의 완전히 다시 작성하지 않고도 확장을 만들고 싶습니다.

내 질문을 더 잘 설명하기 위해이 간단한 예를 만들었습니다.

다음과 같은 기본 구성 요소를 사용하십시오 app/base-panel.component.ts.

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'base-panel',
    template: '<div class="panel" [style.background-color]="color" (click)="onClick($event)">{{content}}</div>',
    styles: [`
    .panel{
    padding: 50px;
  }
  `]
})
export class BasePanelComponent { 

  @Input() content: string;

  color: string = "red";

  onClick(event){
    console.log("Click color: " + this.color);
  }
}

당신은 예를 들어, 단지 ALTER 다른 파생 구성 요소를 만드시겠습니까, 예제 색상의 경우 기본 구성 요소 행동 app/my-panel.component.ts:

import {Component} from 'angular2/core';
import {BasePanelComponent} from './base-panel.component'

@Component({
    selector: 'my-panel',
    template: '<div class="panel" [style.background-color]="color" (click)="onClick($event)">{{content}}</div>',
    styles: [`
    .panel{
    padding: 50px;
  }
  `]
})
export class MyPanelComponent extends BasePanelComponent{

  constructor() {
    super();
    this.color = "blue";
  }
}

Plunker의 완전한 작업 예

참고 :이 예제는 간단하고 상속을 사용할 필요가 없지만 해결할 수는 있지만 실제 문제를 설명하기위한 것입니다.

파생 구성 요소의 구현에서 볼 수 있듯이 app/my-panel.component.ts많은 구현이 반복되었으며 실제로 상속 된 단일 부분은 class BasePanelComponent이지만 @Component변경 부분뿐만 아니라 기본적으로 완전히 반복되어야했습니다 selector: 'my-panel'.

구성 요소 Angular2를 문자 그대로 완전히 상속 class하여 표시 / 주석 의 정의를 상속받는 방법이 @Component있습니까?

편집 1-기능 요청

기능 요청 angular2가 GitHub의 프로젝트에 추가됨 : angular2 구성 요소 주석 확장 / 상속 # 7968

편집 2-마감 요청

이로 인해 데코레이터를 병합하는 방법을 간략하게 알지 못하도록 요청이 마감되었습니다 . 옵션없이 우리를 떠나. 따라서 제 의견은 이슈에 인용되어 있습니다.

대체 솔루션 :

Thierry Templier의이 답변은 문제를 해결할 수있는 대체 방법입니다.

Thierry Templier와 관련하여 몇 가지 질문을 한 후이 질문에 언급 된 상속 제한의 대안으로 내 기대를 충족시키는 다음 작업 예를 보았습니다.

1-사용자 정의 데코레이터 생성 :

export function CustomComponent(annotation: any) {
  return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);

    var parentAnnotation = parentAnnotations[0];
    Object.keys(parentAnnotation).forEach(key => {
      if (isPresent(parentAnnotation[key])) {
        // verify is annotation typeof function
        if(typeof annotation[key] === 'function'){
          annotation[key] = annotation[key].call(this, parentAnnotation[key]);
        }else if(
        // force override in annotation base
        !isPresent(annotation[key])
        ){
          annotation[key] = parentAnnotation[key];
        }
      }
    });

    var metadata = new Component(annotation);

    Reflect.defineMetadata('annotations', [ metadata ], target);
  }
}

2-@Component 데코레이터가있는 기본 구성 요소 :

@Component({
  // create seletor base for test override property
  selector: 'master',
  template: `
    <div>Test</div>
  `
})
export class AbstractComponent {

}

3-@CustomComponent 데코레이터가있는 하위 구성 요소 :

@CustomComponent({
  // override property annotation
  //selector: 'sub',
  selector: (parentSelector) => { return parentSelector + 'sub'}
})
export class SubComponent extends AbstractComponent {
  constructor() {
  }
}

완전한 예를 가진 Plunkr.

Angular 2 버전 2.3이 방금 릴리스되었으며 기본 컴포넌트 상속이 포함됩니다. 템플릿과 스타일을 제외하고 원하는 것을 상속하고 무시할 수있는 것 같습니다. 일부 참고 문헌 :

• Angular 2.3의 새로운 기능

• Angular 2의 구성 요소 상속

• 컴포넌트 상속을 보여주는 Plunkr

이제 타이프 라이터 2.2 지원의 클래스 표현식을 통해 유지 mixin은 우리가 구성 요소에 대한 유지 mixin을 표현하는 더 나은 방법이있다. 다른 답변에서 논의 된 것처럼 앵귤러 2.3 ( 토론 ) 이후의 구성 요소 상속 또는 사용자 정의 데코레이터 를 사용할 수도 있습니다. 그러나 Mixins에는 구성 요소 간 동작을 재사용하는 데 선호되는 몇 가지 속성이 있다고 생각합니다.

• 믹스 인은보다 유연하게 구성됩니다. 즉, 기존 컴포넌트에서 믹스 인을 믹스 앤 매치하거나 믹스 인을 결합하여 새로운 컴포넌트를 만들 수 있습니다
• 클래스 상속 계층 구조로의 명확한 선형화로 인해 믹스 인 구성을 이해하기 쉽게 유지
• 컴포넌트 상속을 괴롭히는 데코레이터 및 주석 관련 문제를 더 쉽게 피할 수 있습니다 ( 토론 )

Mixins의 작동 방식을 이해하려면 위의 TypeScript 2.2 발표를 읽으십시오. 각진 GitHub 문제에 대한 관련 토론은 추가 세부 사항을 제공합니다.

다음 유형이 필요합니다.

export type Constructor<T> = new (...args: any[]) => T;

export class MixinRoot {
}

그런 다음이 Destroyable믹스 인과 같이 믹스 인을 선언하여 컴포넌트가 다음에 배치해야하는 서브 스크립 션을 추적하는 데 도움 이 됩니다 ngOnDestroy.

export function Destroyable<T extends Constructor<{}>>(Base: T) {
  return class Mixin extends Base implements OnDestroy {
    private readonly subscriptions: Subscription[] = [];

    protected registerSubscription(sub: Subscription) {
      this.subscriptions.push(sub);
    }

    public ngOnDestroy() {
      this.subscriptions.forEach(x => x.unsubscribe());
      this.subscriptions.length = 0; // release memory
    }
  };
}

믹스 인에 Destroyable에 Component, 당신은 다음과 같은 구성 요소를 선언합니다 :

export class DashboardComponent extends Destroyable(MixinRoot) 
    implements OnInit, OnDestroy { ... }

주 MixinRoot당신이 원하는 경우에만 필요합니다 extend믹스 인 조성물에 관한 것이다. 여러 믹스 인을 쉽게 확장 할 수 있습니다 (예 :) A extends B(C(D)). 이것은 위에서 이야기했던 믹스 인의 명백한 선형화입니다. 예를 들어 상속 계층 구조를 효과적으로 구성하고 A -> B -> C -> D있습니다.

다른 경우, 예를 들어 기존 클래스에서 믹스 인을 작성하려는 경우 믹스 인을 다음과 같이 적용 할 수 있습니다.

const MyClassWithMixin = MyMixin(MyClass);

그러나, 나는 첫 번째 방법이 가장 적합한 발견 Components하고 Directives이 또한 장식 할 필요에 따라, @Component또는 @Directive어쨌든.

최신 정보

구성 요소 상속은 2.3.0-rc.0 부터 지원됩니다.

실물

지금까지 나에게 가장 편리한 별도로 템플릿 및 스타일을 유지하는 것입니다 *html및 *.css파일을 통해 사람들을 지정 templateUrl하고 styleUrls쉽게 재사용, 그래서.

@Component {
    selector: 'my-panel',
    templateUrl: 'app/components/panel.html', 
    styleUrls: ['app/components/panel.css']
}
export class MyPanelComponent extends BasePanelComponent

내가 아는 한 Angular 2에서 아직 구성 요소 상속이 구현되지 않았으며 계획이 있는지 확실하지 않지만 Angular 2는 typescript를 사용하기 때문에 (그 경로를 결정한 경우) 클래스 상속을 사용할 수 있습니다 에 의해 class MyClass extends OtherClass { ... }. 구성 요소 상속을 위해서는 https://github.com/angular/angular/issues 로 이동하여 기능 요청을 제출 하여 Angular 2 프로젝트에 참여하는 것이 좋습니다 .

Angular의 구성 요소 상속 시스템에 대한 몇 가지 주요 제한 사항 및 기능을 이해하겠습니다.

컴포넌트는 클래스 로직 만 상속합니다.

• @Component 데코레이터의 모든 메타 데이터는 상속되지 않습니다.
• 구성 요소 @Input 속성 및 @Output 속성이 상속됩니다.
• 구성 요소 수명주기가 상속되지 않습니다.

이러한 기능은 명심해야 할 중요한 사항이므로 각 기능을 독립적으로 살펴 보겠습니다.

컴포넌트는 클래스 로직 만 상속합니다

구성 요소를 상속하면 내부의 모든 논리가 동일하게 상속됩니다. 비공개 멤버는 해당 멤버를 구현하는 클래스에서만 액세스 할 수 있으므로 공개 멤버 만 상속된다는 점은 주목할 가치가 있습니다.

@Component 데코레이터의 모든 메타 데이터는 상속되지 않습니다

메타 데이터가 상속되지 않았다는 사실은 처음에는 반 직관적 인 것처럼 보일 수 있지만, 이것에 대해 생각하면 실제로는 완벽하게 이해됩니다. Component say (componentA)에서 상속하는 경우 상속하는 ComponentA의 선택기를 상속하는 클래스 인 ComponentB의 선택기를 대체하기를 원하지 않습니다. style / styleUrls뿐만 아니라 template / templateUrl에 대해서도 마찬가지입니다.

구성 요소 @Input 및 @Output 속성이 상속됩니다.

이것은 Angular의 구성 요소 상속에 대해 정말 좋아하는 또 다른 기능입니다. 간단한 문장에서 사용자 정의 @Input 및 @Output 속성이있을 때마다 이러한 속성이 상속됩니다.

구성 요소 수명주기가 상속되지 않습니다

이 부분은 OOP 원칙을 광범위하게 다루지 않은 사람들에게 특히 명확하지 않은 부분입니다. 예를 들어 OnInit과 같은 Angular의 많은 수명주기 후크 중 하나를 구현하는 ComponentA가 있다고 가정 해보십시오. ComponentB를 작성하고 ComponentA를 상속하면 ComponentB에 대한 OnInit 라이프 사이클이 있더라도 명시 적으로 호출 할 때까지 ComponentA의 OnInit 라이프 사이클이 시작되지 않습니다.

수퍼 /베이스 컴포넌트 메소드 호출

ComponentA의 ngOnInit () 메소드를 사용하려면 super 키워드를 사용한 다음 필요한 경우 ngOnInit 인 메소드를 호출해야합니다. super 키워드는이 경우 ComponentA가 상속되는 컴포넌트의 인스턴스를 나타냅니다.

CDK 라이브러리와 재료 라이브러리를 통해 읽는 경우 상속을 사용하지만 구성 요소 자체에는 그다지 많지 않은 경우 컨텐츠 프로젝션은 최고의 IMO입니다. https://blog.angular-university.io/angular-ng-content/ 링크를 참조하십시오 . "이 디자인의 주요 문제"

나는 이것이 당신의 질문에 대답하지는 않는다는 것을 알고 있지만 실제로 구성 요소 상속 / 확장은 피해야한다고 생각합니다 . 내 추론은 다음과 같습니다.

둘 이상의 구성 요소로 확장 된 추상 클래스에 공유 논리가 포함 된 경우 : 서비스를 사용하거나 두 구성 요소간에 공유 할 수있는 새 유형 스크립트 클래스를 만듭니다.

abstract 클래스 ...에 공유 변수 또는 onClicketc 함수가 포함 된 경우 두 확장 구성 요소보기의 html간에 중복이 발생합니다. 이것은 나쁜 습관이며 공유 html을 구성 요소로 나눌 필요가 있습니다. 이 구성 요소 (부품)는 두 구성 요소간에 공유 할 수 있습니다.

구성 요소에 대한 추상 클래스가 필요한 다른 이유가 누락 되었습니까?

최근에 본 예는 AutoUnsubscribe를 확장하는 구성 요소입니다.

import { Subscription } from 'rxjs';
import { OnDestroy } from '@angular/core';
export abstract class AutoUnsubscribeComponent implements OnDestroy {
  protected infiniteSubscriptions: Array<Subscription>;

  constructor() {
    this.infiniteSubscriptions = [];
  }

  ngOnDestroy() {
    this.infiniteSubscriptions.forEach((subscription) => {
      subscription.unsubscribe();
    });
  }
}

이것은 큰 코드베이스에서 infiniteSubscriptions.push()10 번만 사용 되었기 때문에 기본 이었습니다. 또한 가져 오기 및 확장은 AutoUnsubscribe실제로 구성 요소 자체 mySubscription.unsubscribe()의 ngOnDestroy()메서드를 추가하는 것보다 더 많은 코드가 필요하므로 추가 논리가 필요했습니다.

누구든지 업데이트 된 솔루션을 찾고 있다면 Fernando의 대답은 거의 완벽합니다. 것을 제외하고는 ComponentMetadata사용되지 않습니다. 사용 Component하는 대신 나를 위해 일했다.

전체 사용자 정의 데코레이터 CustomDecorator.ts파일은 다음과 같습니다.

import 'zone.js';
import 'reflect-metadata';
import { Component } from '@angular/core';
import { isPresent } from "@angular/platform-browser/src/facade/lang";

export function CustomComponent(annotation: any) {
  return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);

    var parentAnnotation = parentAnnotations[0];
    Object.keys(parentAnnotation).forEach(key => {
      if (isPresent(parentAnnotation[key])) {
        // verify is annotation typeof function
        if(typeof annotation[key] === 'function'){
          annotation[key] = annotation[key].call(this, parentAnnotation[key]);
        }else if(
          // force override in annotation base
          !isPresent(annotation[key])
        ){
          annotation[key] = parentAnnotation[key];
        }
      }
    });

    var metadata = new Component(annotation);

    Reflect.defineMetadata('annotations', [ metadata ], target);
  }
}

그런 다음 새 구성 요소 sub-component.component.ts파일 로 가져 와서 다음 @CustomComponent대신 사용 @Component하십시오.

import { CustomComponent } from './CustomDecorator';
import { AbstractComponent } from 'path/to/file';

...

@CustomComponent({
  selector: 'subcomponent'
})
export class SubComponent extends AbstractComponent {

  constructor() {
    super();
  }

  // Add new logic here!
}

@Input, @Output, @ViewChild 등을 상속받을 수 있습니다. 샘플을보십시오.

@Component({
    template: ''
})
export class BaseComponent {
    @Input() someInput: any = 'something';

    @Output() someOutput: EventEmitter<void> = new EventEmitter<void>();

}

@Component({
    selector: 'app-derived',
    template: '<div (click)="someOutput.emit()">{{someInput}}</div>',
    providers: [
        { provide: BaseComponent, useExisting: DerivedComponent }
    ]
})
export class DerivedComponent {

}

선택기를 새 이름으로 재정의해야한다는 것만으로 구성 요소를 typescript 클래스 상속과 동일하게 확장 할 수 있습니다. 부모 구성 요소의 모든 Input () 및 Output () 속성이 정상적으로 작동합니다

최신 정보

@Component는 데코레이터입니다.

데코레이터는 객체가 아닌 클래스 선언 중에 적용됩니다.

기본적으로 데코레이터는 클래스 객체에 일부 메타 데이터를 추가하며 상속을 통해 액세스 할 수 없습니다.

데코레이터 상속을 달성하려면 사용자 정의 데코레이터를 작성하는 것이 좋습니다. 아래 예와 같은 것.

export function CustomComponent(annotation: any) {
    return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;

    var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);
    var parentParamTypes = Reflect.getMetadata('design:paramtypes', parentTarget);
    var parentPropMetadata = Reflect.getMetadata('propMetadata', parentTarget);
    var parentParameters = Reflect.getMetadata('parameters', parentTarget);

    var parentAnnotation = parentAnnotations[0];

    Object.keys(parentAnnotation).forEach(key => {
    if (isPresent(parentAnnotation[key])) {
        if (!isPresent(annotation[key])) {
        annotation[key] = parentAnnotation[key];
        }
    }
    });
    // Same for the other metadata
    var metadata = new ComponentMetadata(annotation);

    Reflect.defineMetadata('annotations', [ metadata ], target);
    };
};

참조 : https://medium.com/@ttemplier/angular2-decorators-and-class-inheritance-905921dbd1b7

just use inheritance,Extend parent class in child class and declare constructor with parent class parameter and this parameter use in super().

1.parent class
@Component({
    selector: 'teams-players-box',
    templateUrl: '/maxweb/app/app/teams-players-box.component.html'
})
export class TeamsPlayersBoxComponent {
    public _userProfile:UserProfile;
    public _user_img:any;
    public _box_class:string="about-team teams-blockbox";
    public fullname:string;
    public _index:any;
    public _isView:string;
    indexnumber:number;
    constructor(
        public _userProfilesSvc: UserProfiles,
        public _router:Router,
    ){}
2.child class
@Component({

    selector: '[teams-players-eligibility]',
    templateUrl: '/maxweb/app/app/teams-players-eligibility.component.html'
})
export class TeamsPlayersEligibilityComponent extends TeamsPlayersBoxComponent{

    constructor (public _userProfilesSvc: UserProfiles,
            public _router:Router) {
            super(_userProfilesSvc,_router);
        }
}